/* =========================================================================
 * BUYACÁ — Refinements v8.8.9 (capa de override sobre v8.8.8)
 * Carga DESPUÉS de v8.8.8 → wins con misma especificidad + !important.
 * Diseño: híbrido Pinterest (móvil) + Plataforma profesional (tablet/desktop).
 * ========================================================================= */

/* -------------------------------------------------------------------------
 *  TOKENS (variables CSS adicionales con fallbacks seguros)
 * ------------------------------------------------------------------------- */
.buyaca-app {
    --bq89-shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.02);
    --bq89-shadow-hover: 0 12px 28px rgba(15, 23, 42, 0.10), 0 4px 10px rgba(15, 23, 42, 0.04);
    --bq89-shadow-card: 0 2px 8px rgba(15, 23, 42, 0.05);
    --bq89-radius-card: 16px;
    --bq89-radius-pill: 999px;
    --bq89-ease: cubic-bezier(.2, .8, .2, 1);
    --bq89-dur-fast: .18s;
    --bq89-dur-base: .25s;
    --bq89-gold: #FFD700;
    --bq89-gold-deep: #DAA520;
}

/* -------------------------------------------------------------------------
 *  1. ESTRELLAS / BADGE "DESTACADO" — minimalista sólido sin contornos
 * -------------------------------------------------------------------------
 *  Caso A (estático): <span class="bq-feat-tag"> — solo indicador.
 *                     Resultado: ÍCONO LIMPIO, sin fondo, sin borde.
 *  Caso B (acción):  <a class="bq-feat-tag" href=...tab=plans>Destacar</a>
 *                    Resultado: BADGE moderno integrado con microinteracción.
 * ------------------------------------------------------------------------- */

/* Caso A — base limpia minimalista. Reseteamos lo que v8.8.7/8 dejaron. */
.buyaca-app .bq-feat-tag,
.buyaca-app span.bq-feat-tag,
.buyaca-app .bq-feat-mini-badge {
    background: transparent !important;
    border: 0 !important;

    padding: 2px 4px !important;
    color: var(--bq89-gold-deep) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    gap: 5px !important;
    border-radius: 0 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    transition: transform var(--bq89-dur-fast) var(--bq89-ease),
        color var(--bq89-dur-fast) var(--bq89-ease) !important;
}

/* La estrella en sí, en cualquier contexto: siempre amarillo sólido sin stroke */
.buyaca-app .bq-feat-tag svg,
.buyaca-app .bq-feat-mini-badge svg,
.buyaca-app .bq-featured-v2-star-badge svg,
.buyaca-app .bq-featured-v2-stars svg {
    fill: var(--bq89-gold) !important;
    stroke: none !important;
    filter: none !important;
    overflow: visible;
}

.buyaca-app .bq-feat-tag svg polygon,
.buyaca-app .bq-feat-mini-badge svg polygon,
.buyaca-app .bq-featured-v2-star-badge svg polygon,
.buyaca-app .bq-featured-v2-stars svg polygon {
    fill: var(--bq89-gold) !important;
    stroke: none !important;
    stroke-width: 0 !important;
}

/* La estrella dentro del carrusel "Locales destacados" pierde el stroke dorado
   oscuro (que en v8.8.8 daba un anillo grueso) y se ve plana, moderna. */
.buyaca-app .bq-featured-v2-star-badge {
    background: transparent !important;
    border: 0 !important;

    padding: 0 !important;
}

/* Caso B — sólo el anchor con tab=plans (link CTA) recibe estilo de badge.
 * [fix pautar] Rediseñado como pill sólido y vistoso (gradiente dorado + texto
 * blanco) para que el botón "Pautar" resalte frente al negocio/producto. */
.buyaca-app a.bq-feat-tag[href*="tab=plans"],
.buyaca-app a.bq-feat-tag[href*="tab%3Dplans"] {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #FFC107, #FF8F00) !important;
    border: 1px solid rgba(255, 143, 0, 0.55) !important;
    padding: 5px 13px 5px 11px !important;
    border-radius: var(--bq89-radius-pill) !important;
    color: #fff !important;
    font-weight: 800 !important;

    text-decoration: none !important;

    transition: transform var(--bq89-dur-fast) var(--bq89-ease),
        border-color var(--bq89-dur-fast) var(--bq89-ease),
        box-shadow var(--bq89-dur-base) var(--bq89-ease),
        color var(--bq89-dur-fast) var(--bq89-ease) !important;
}

/* El ícono de estrella en blanco para contraste sobre el gradiente */
.buyaca-app a.bq-feat-tag[href*="tab=plans"] svg polygon,
.buyaca-app a.bq-feat-tag[href*="tab%3Dplans"] svg polygon {
    fill: #fff !important;
    stroke: rgba(255, 255, 255, 0.6) !important;
}

/* Glow sutil sobre el badge al hover (no es sombra dura) */
.buyaca-app a.bq-feat-tag[href*="tab=plans"]::before,
.buyaca-app a.bq-feat-tag[href*="tab%3Dplans"]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 50% -20%, rgba(255, 255, 255, 0.4), transparent 65%);
    opacity: 0;
    transition: opacity var(--bq89-dur-base) var(--bq89-ease);
    pointer-events: none;
    z-index: 0;
}

.buyaca-app a.bq-feat-tag[href*="tab=plans"]:hover::before,
.buyaca-app a.bq-feat-tag[href*="tab%3Dplans"]:hover::before {
    opacity: 1;
}

.buyaca-app a.bq-feat-tag[href*="tab=plans"] svg,
.buyaca-app a.bq-feat-tag[href*="tab%3Dplans"] svg {
    position: relative;
    z-index: 1;
}

/* [Purga] Regla vacía (solo comentario, sin propiedades) retirada. */

.buyaca-app a.bq-feat-tag[href*="tab=plans"]:hover,
.buyaca-app a.bq-feat-tag[href*="tab%3Dplans"]:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 160, 0, 0.85) !important;

    color: #fff !important;
}

.buyaca-app a.bq-feat-tag[href*="tab=plans"]:active,
.buyaca-app a.bq-feat-tag[href*="tab%3Dplans"]:active {
    transform: translateY(0);

}

/* Marker para anclar el JS — dato de identificación */
/* [Purga] Regla vacía (solo comentario: "mismo estilo que arriba, ya cubierto por selector general") retirada. */

/* -------------------------------------------------------------------------
 *  2. CARRUSEL "Locales Pautados" — fix colapso al filtrar categoría vacía
 * -------------------------------------------------------------------------
 *  Antes: x-show="featuredList.length > 0" eliminaba toda la sección.
 *  Ahora: la sección puede colapsar, pero inyectamos un placeholder hermano
 *  que mantiene el ritmo vertical y muestra mensaje amigable.
 * ------------------------------------------------------------------------- */
.buyaca-app .bq-destacados-section {
    /* Reservamos un mínimo razonable cuando la sección está visible para que el
       contenido no salte verticalmente entre filtros distintos */
    min-height: 0;
    contain: layout;
    transition: min-height var(--bq89-dur-base) var(--bq89-ease);
}

.buyaca-app .bq-featured-empty-v889 {
    /* Hermano del .bq-destacados-section, controlado por JS para mostrarse
       SOLO cuando la sección está oculta y hay un filtro activo. */
    display: none;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0 16px 14px;
    padding: 18px 22px;
    border-radius: var(--bq89-radius-card);
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.02), rgba(15, 23, 42, 0.005));
    border: 1px dashed rgba(15, 23, 42, 0.1);
    color: var(--bq-text-secondary, #6B7280);
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
    flex-wrap: wrap;
    animation: bq89FadeIn .35s var(--bq89-ease) both;
}

.buyaca-app .bq-featured-empty-v889.is-visible {
    display: flex;
}

.buyaca-app .bq-featured-empty-v889 svg {
    flex-shrink: 0;
    color: var(--bq-text-secondary, #94a3b8);
    opacity: 0.75;
}

.buyaca-app .bq-featured-empty-v889 strong {
    color: var(--bq-text-primary, #0f172a);
    font-weight: 700;
    display: block;
    margin-bottom: 2px;
    font-size: 13.5px;
}

.buyaca-app .bq-featured-empty-v889 .bq89-empty-text {
    text-align: left;
    flex: 1;
    min-width: 200px;
}

@keyframes bq89FadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Tema oscuro */
.buyaca-app:not(.bq-light-mode) .bq-featured-empty-v889 {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    border-color: rgba(255, 255, 255, 0.08);
}

/* -------------------------------------------------------------------------
 *  3. GRILLA HÍBRIDA: Masonry Pinterest sólo en móvil < 520px
 * -------------------------------------------------------------------------
 *  v8.8.8 aplicaba masonry en TODAS las resoluciones (CSS columns 2/3/4/5).
 *  v8.8.9 mantiene masonry SÓLO < 520px. ≥ 520px revierte a CSS Grid alineado.
 * ------------------------------------------------------------------------- */

/* MÓVIL (< 520px): masonry 2 columnas estilo Pinterest. */
@media (max-width: 519.98px) {

    .buyaca-app .bq-cv2-product-grid.bq-view-masonry,
    .buyaca-app .buyaca-catalog-grid.bq-view-masonry,
    .buyaca-app .bq-products-grid.bq-view-masonry {
        display: block !important;
        grid-template-columns: none !important;
        column-count: 2 !important;
        column-gap: 12px !important;
        padding: 8px 12px 12px !important;
    }

    .buyaca-app .bq-view-masonry>* {
        break-inside: avoid;
        page-break-inside: avoid;
        -webkit-column-break-inside: avoid;
        margin: 0 0 12px !important;
        display: inline-block !important;
        width: 100% !important;
        vertical-align: top;
        border-radius: var(--bq89-radius-card) !important;
    }

    /* Imágenes en masonry: altura natural (lo que crea el efecto Pinterest) */
    .buyaca-app .bq-view-masonry .bq-cv2-product-img {
        aspect-ratio: auto !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .buyaca-app .bq-view-masonry .bq-cv2-product-img img {
        height: auto !important;
        width: 100% !important;
        display: block;
        object-fit: contain !important;
        background: linear-gradient(145deg, #f8fafc, #f1f5f9);
    }

    .buyaca-app:not(.bq-light-mode) .bq-view-masonry .bq-cv2-product-img img {
        background: linear-gradient(145deg, #1e1e26, #14141a);
    }
}

/* TABLET / DESKTOP (≥ 520px): grilla CSS Grid limpia, alineada, consistente. */
@media (min-width: 520px) {

    .buyaca-app .bq-cv2-product-grid.bq-view-masonry,
    .buyaca-app .buyaca-catalog-grid.bq-view-masonry,
    .buyaca-app .bq-products-grid.bq-view-masonry {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
        column-count: initial !important;
        column-gap: initial !important;
        gap: 16px !important;
        padding: 12px 16px !important;
    }

    .buyaca-app .bq-view-masonry>* {
        display: block !important;
        margin: 0 !important;
        width: auto !important;
        break-inside: initial !important;
        page-break-inside: initial !important;
        -webkit-column-break-inside: initial !important;
    }

    /* Imágenes con aspect-ratio fijo restaurado para grilla consistente */
    .buyaca-app .bq-view-masonry .bq-cv2-product-img {
        aspect-ratio: 1 !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .buyaca-app .bq-view-masonry .bq-cv2-product-img img {
        height: 100% !important;
        width: 100% !important;
        object-fit: cover !important;
    }
}

/* Tablet (≥ 768px): 3 columnas perfectamente alineadas */
@media (min-width: 768px) {

    .buyaca-app .bq-cv2-product-grid.bq-view-masonry,
    .buyaca-app .buyaca-catalog-grid.bq-view-masonry,
    .buyaca-app .bq-products-grid.bq-view-masonry {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
        gap: 18px !important;
    }
}

/* Desktop (≥ 1040px): 4–5 columnas según ancho */
@media (min-width: 1040px) {

    .buyaca-app .bq-cv2-product-grid.bq-view-masonry,
    .buyaca-app .buyaca-catalog-grid.bq-view-masonry,
    .buyaca-app .bq-products-grid.bq-view-masonry {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
        gap: 20px !important;
    }
}

/* -------------------------------------------------------------------------
 *  4. SOMBRAS SUAVES MODERNAS — vuelven, pero discretas y elevadas al hover
 * ------------------------------------------------------------------------- */
.buyaca-app .bq-cv2-product-card,
.buyaca-app .bq-pc-card,
.buyaca-app .bq-profile-card,
.buyaca-app .bq-product-card,
.buyaca-app .bq-cat-card {

    border-radius: var(--bq89-radius-card);
    transition: transform var(--bq89-dur-base) var(--bq89-ease),
        box-shadow var(--bq89-dur-base) var(--bq89-ease),
        border-color var(--bq89-dur-base) var(--bq89-ease) !important;
}

.buyaca-app .bq-cv2-product-card:hover,
.buyaca-app .bq-pc-card:hover,
.buyaca-app .bq-profile-card:hover,
.buyaca-app .bq-product-card:hover,
.buyaca-app .bq-cat-card:hover {
    transform: translateY(-3px);

    border-color: var(--bq-primary, #3A59EF) !important;
}

/* Hero del carrusel — sombra apenas perceptible para que destaque sin pesar */
.buyaca-app .bq-featured-card-v2 {

    transition: transform var(--bq89-dur-base) var(--bq89-ease),
        box-shadow var(--bq89-dur-base) var(--bq89-ease) !important;
}

.buyaca-app .bq-featured-card-v2:hover {
    transform: translateY(-2px) scale(1.005);

}

/* [Purga] Dos reglas vacías (selectores de tarjetas en modo oscuro, base y :hover) retiradas. */

/* -------------------------------------------------------------------------
 *  5. PREVENCIÓN DE LAYOUT SHIFT (CLS) — aspect-ratio + skeleton
 * ------------------------------------------------------------------------- */

/* Reservar espacio para imágenes antes de cargar — shimmer animado */
.buyaca-app .bq-cv2-product-img.bq-img-shimmer,
.buyaca-app .bq-img-shimmer {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
}

.buyaca-app .bq-cv2-product-img.bq-img-shimmer::after,
.buyaca-app .bq-img-shimmer::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.5) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: translateX(-100%);
    animation: bq89Shimmer 1.4s var(--bq89-ease) infinite;
    pointer-events: none;
    z-index: 1;
}

.buyaca-app:not(.bq-light-mode) .bq-cv2-product-img.bq-img-shimmer,
.buyaca-app:not(.bq-light-mode) .bq-img-shimmer {
    background: linear-gradient(135deg, #1e1e26, #14141a);
}

.buyaca-app:not(.bq-light-mode) .bq-cv2-product-img.bq-img-shimmer::after,
.buyaca-app:not(.bq-light-mode) .bq-img-shimmer::after {
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.05) 50%,
            rgba(255, 255, 255, 0) 100%);
}

@keyframes bq89Shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

/* Asegurar que las tarjetas reservan espacio aunque el grid esté cargando */
.buyaca-app .bq-cv2-product-card[data-bq89-loading="1"] {
    min-height: 220px;
}

/* Loader de página/sección — ocupa altura mínima estable */
.buyaca-app .bq-loading-skeleton-v889 {
    display: grid;
    gap: 14px;
    padding: 16px;
}

@media (min-width: 520px) {
    .buyaca-app .bq-loading-skeleton-v889 {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
}

.buyaca-app .bq-loading-skeleton-v889>div {
    aspect-ratio: 4/5;
    border-radius: var(--bq89-radius-card);
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    position: relative;
    overflow: hidden;
}

.buyaca-app .bq-loading-skeleton-v889>div::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.5) 50%, transparent 100%);
    animation: bq89Shimmer 1.4s var(--bq89-ease) infinite;
}

/* -------------------------------------------------------------------------
 *  6. SLOTS DE PRODUCTOS DESTACADOS — botón ELIMINAR en estado expirado
 * ------------------------------------------------------------------------- */
.bq-fp-slot-card.is-expired .bq-fp-slot-actions {
    align-items: center !important;
    flex-wrap: wrap !important;
}

.bq-fp-delete-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #EF4444;
    padding: 6px 12px;
    border-radius: var(--bq89-radius-pill);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--bq89-dur-fast) var(--bq89-ease);
    line-height: 1;
    margin-left: 8px;
}

.bq-fp-delete-btn:hover {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.65);
    color: #DC2626;
    transform: translateY(-1px);

}

.bq-fp-delete-btn:active {
    transform: translateY(0);

}

.bq-fp-delete-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.bq-fp-delete-btn .bq89-spinner {
    width: 11px;
    height: 11px;
    border: 1.5px solid rgba(239, 68, 68, 0.3);
    border-top-color: #EF4444;
    border-radius: 50%;
    animation: bq89Spin .8s linear infinite;
}

@keyframes bq89Spin {
    to {
        transform: rotate(360deg);
    }
}

/* Animación de remoción del slot (sin layout shift abrupto) */
.bq-fp-slot-card.is-removing-v889 {
    transition: opacity .35s ease,
        transform .35s ease,
        max-height .4s var(--bq89-ease),
        margin .35s ease,
        padding .35s ease,
        border-color .25s ease !important;
    opacity: 0 !important;
    transform: translateX(-24px) scale(0.96) !important;
    max-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-color: transparent !important;
    overflow: hidden !important;
    pointer-events: none;
}

/* -------------------------------------------------------------------------
 *  7. JERARQUÍA TIPOGRÁFICA Y ESPACIADO — toques finos
 * ------------------------------------------------------------------------- */

/* Títulos de sección: peso y tracking más pulidos */
.buyaca-app .bq-home-section-title,
.buyaca-app .bq-section-title,
.buyaca-app .bq-products-header h2,
.buyaca-app .bq-cat-products-title {
    font-weight: bold !important;
    letter-spacing: -0.01em !important;
    line-height: 1.25 !important;
}

/* Texto secundario: legibilidad mejorada */
.buyaca-app .bq-cv2-product-name,
.buyaca-app .bq-cv2-product-card .bq-cv2-product-title,
.buyaca-app .bq-product-name {
    line-height: 1.35 !important;
    letter-spacing: -0.005em !important;
}

/* Margen consistente entre secciones (refina v8.8.8 que puso 0) */
.buyaca-app .bq-destacados-section+section,
.buyaca-app .bq-destacados-section+div[class*="recomendados"],
.buyaca-app .bq-destacados-section+.bq-recomendados-section {
    margin-top: 14px !important;
}

/* Espacio respiración bajo el header sticky cuando hay filtros activos */
.buyaca-app[data-filter-active="true"] .bq-app-header+*,
.buyaca-app[data-filter-active="true"] .bq-products-header+* {
    margin-top: 12px !important;
}

/* -------------------------------------------------------------------------
 *  8. ANIMACIONES DE ENTRADA — tarjetas que aparecen sin ser bruscas
 * ------------------------------------------------------------------------- */
.buyaca-app .bq89-fade-in-up {
    animation: bq89FadeInUp .45s var(--bq89-ease) both;
}

@keyframes bq89FadeInUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {

    .buyaca-app .bq89-fade-in-up,
    .buyaca-app .bq-cv2-product-card,
    .buyaca-app .bq-pc-card,
    .buyaca-app .bq-profile-card {
        animation: none !important;
        transition: none !important;
    }

    .buyaca-app .bq-cv2-product-card:hover,
    .buyaca-app .bq-pc-card:hover,
    .buyaca-app .bq-profile-card:hover,
    .buyaca-app .bq-featured-card-v2:hover {
        transform: none !important;
    }
}

/* -------------------------------------------------------------------------
 *  9. CARRUSEL — estabilidad de altura cuando se filtra
 * ------------------------------------------------------------------------- */
.buyaca-app .bq-featured-scroll {
    /* Cuando el carrusel queda con menos elementos que el ancho de la viewport,
       evitamos que se "encoja" verticalmente. */
    min-height: 0;
    transition: min-height var(--bq89-dur-base) var(--bq89-ease);
}

.buyaca-app .bq-featured-scroll[data-bq89-stable="1"] {
    min-height: 280px;
    /* aspect-ratio 4/5 base aprox para 220px ancho */
}

/* -------------------------------------------------------------------------
 * 10. CHIPS / FILTROS ACTIVOS — claridad visual
 * ------------------------------------------------------------------------- */
.buyaca-app .bq-filter-active-chip,
.buyaca-app .bq-cat-filter.is-active,
.buyaca-app [data-filter].is-active {
    background: var(--bq-primary-soft, rgba(58, 89, 239, 0.10)) !important;
    color: var(--bq-primary, #3A59EF) !important;
    border-color: var(--bq-primary, #3A59EF) !important;

}

/* -------------------------------------------------------------------------
 * 11. [Purga v10.14] "Campañas" dejó de ser el botón CTA "Destacar" — el
 *     glow dorado especial se retira para que la pestaña luzca igual que
 *     el resto (ver ui-refinements.css sección 5).
 * ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
 * 12. RESPETO A TEMA OSCURO — overrides faltantes
 * ------------------------------------------------------------------------- */
.buyaca-app:not(.bq-light-mode) .bq-fp-delete-btn {
    border-color: rgba(248, 113, 113, 0.45);
    color: #F87171;
}

.buyaca-app:not(.bq-light-mode) .bq-fp-delete-btn:hover {
    background: rgba(248, 113, 113, 0.12);
    border-color: rgba(248, 113, 113, 0.7);
    color: #FCA5A5;
}

/* Fin v8.8.9 */

/* ════════════════════════════════════════════════════════════════════════
   v8.8.11 — REDISEÑO ELEGANTE DE TARJETAS + BANNER/HEADER INDEPENDIENTES
   ────────────────────────────────────────────────────────────────────────
   1. Banner y header son DOS elementos totalmente independientes
   2. Cards (productos · negocios · catálogos) con border-radius: 3px
   3. Tipografía delgada y elegante en todas las cards
   4. Header sticky con animación suave al hacer scroll
   ════════════════════════════════════════════════════════════════════════ */

/* ─────── 1 · BANNER 100% INDEPENDIENTE DEL HEADER ─────── */
/* Anula cualquier intento previo de colapsar el banner cuando
   el header recibe las clases bq-collapsed-all / bq-only-filters.
   El banner es ahora un bloque autónomo que vive su propio scroll. */
.buyaca-app .bq-banner-section,
.bq-app-header.bq-only-filters .bq-banner-section,
.bq-app-header.bq-collapsed-all .bq-banner-section,
.bq-app-header.bq-only-filters~.bq-banner-section,
.bq-app-header.bq-collapsed-all~.bq-banner-section {
    max-height: none !important;
    opacity: 1 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 4px !important;
    pointer-events: auto !important;
    visibility: visible !important;
    overflow: visible !important;
    transform: none !important;
    position: relative !important;
    z-index: 0 !important;
}

/* ─────── 2 · HEADER STICKY CON TRANSICIÓN SUAVE ─────── */
.buyaca-app .bq-app-header,
.buyaca-app #bq-brand-topbar,
.buyaca-app #bq-products-topbar {
    position: fixed !important;
    top: 0 !important;
    z-index: 100 !important;
    transition: box-shadow 0.32s ease;
    /* will-change y transform-transition removidos en v8.8.12 (header estático) */
}

/* Scroll abajo confirmado → (v8.8.12 lo deja estático, sin transform) */
/* [Purga] Regla vacía retirada — el transform ya se había quitado en v8.8.12 (chocaba con position:sticky y causaba parpadeo). */

/* Scroll arriba → (v8.8.12 lo deja estático, sin transform) */
/* [Purga] Regla vacía retirada — el transform ya se había quitado en v8.8.12 (el header queda fijo en top:0 sin moverse). */

/* Logo wordmark colapsa con elegancia al hacer scroll */
.buyaca-app .bq-header-logo-wrap {
    max-height: 64px;
    overflow: hidden;
    transition:
        max-height 0.34s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.26s ease,
        padding 0.34s cubic-bezier(0.22, 1, 0.36, 1),
        margin 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.buyaca-app .bq-app-header.bq-only-filters .bq-header-logo-wrap,
.buyaca-app .bq-app-header.bq-collapsed-all .bq-header-logo-wrap {
    max-height: 0 !important;
    opacity: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none;
}

/* Chips/filtros con la misma curva suave */
.buyaca-app .bq-header-chips-wrap {
    transition:
        max-height 0.34s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.26s ease,
        margin 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─────── 3 · TARJETAS · BORDER-RADIUS 3px UNIFICADO ─────── */
.buyaca-app .bq-pc,
.buyaca-app .bq-pf-card,
.buyaca-app .bq-pf-card-v2,
.buyaca-app .bq-home-card,
.buyaca-app .bq-cv2-product-card,
.buyaca-app .buyaca-business-card {
    border-radius: 8px !important;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.06);

    transition:
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.28s ease,
        border-color 0.28s ease;
}

/* Modo oscuro: borde claro sutil */
.buyaca-app:not(.bq-light-mode) .bq-pc,
.buyaca-app:not(.bq-light-mode) .bq-pf-card,
.buyaca-app:not(.bq-light-mode) .bq-pf-card-v2,
.buyaca-app:not(.bq-light-mode) .bq-home-card,
.buyaca-app:not(.bq-light-mode) .bq-cv2-product-card,
.buyaca-app:not(.bq-light-mode) .buyaca-business-card {
    border-color: rgba(255, 255, 255, 0.06);

}

/* Imágenes interiores: esquinas superiores 2px (recorte fino que respeta el padre) */
.buyaca-app .bq-pc .bq-pc-iw,
.buyaca-app .bq-pf-card .bq-pf-img-w,
.buyaca-app .bq-cv2-product-card .bq-cv2-product-img,
.buyaca-app .bq-home-card .bq-home-card-image-wrap,
.buyaca-app .buyaca-business-card .buyaca-business-card-image {
    border-radius: 2px 2px 0 0 !important;
    overflow: hidden;
}

/* Hover suave: levanta levemente y muestra sombra elegante */
.buyaca-app .bq-pc:hover,
.buyaca-app .bq-pf-card:hover,
.buyaca-app .bq-pf-card-v2:hover,
.buyaca-app .bq-home-card:hover,
.buyaca-app .bq-cv2-product-card:hover,
.buyaca-app .buyaca-business-card:hover {
    transform: translateY(-2px);

    border-color: rgba(0, 0, 0, 0.10);
}

.buyaca-app:not(.bq-light-mode) .bq-pc:hover,
.buyaca-app:not(.bq-light-mode) .bq-pf-card:hover,
.buyaca-app:not(.bq-light-mode) .bq-home-card:hover,
.buyaca-app:not(.bq-light-mode) .bq-cv2-product-card:hover,
.buyaca-app:not(.bq-light-mode) .buyaca-business-card:hover {
    border-color: rgba(255, 255, 255, 0.14);

}

/* ─────── 4 · TIPOGRAFÍA DELGADA Y ELEGANTE EN CARDS ─────── */
/* Fuerza la familia tipográfica moderna en TODA la card */
.buyaca-app .bq-pc,
.buyaca-app .bq-pc *,
.buyaca-app .bq-pf-card,
.buyaca-app .bq-pf-card *,
.buyaca-app .bq-home-card,
.buyaca-app .bq-home-card *,
.buyaca-app .bq-cv2-product-card,
.buyaca-app .bq-cv2-product-card *,
.buyaca-app .buyaca-business-card,
.buyaca-app .buyaca-business-card * {
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Títulos / nombres → DELGADOS (400) y con tracking optical */
.buyaca-app .bq-pc-name,
.buyaca-app .bq-pf-name,
.buyaca-app .bq-home-card-name,
.buyaca-app .bq-cv2-product-name,
.buyaca-app .bq-cv2-product-name--minimal,
.buyaca-app .buyaca-business-card-title {
    font-weight: 400 !important;
    letter-spacing: -0.15px !important;
    line-height: 1.35 !important;
}

/* Precios → medium-semibold elegante (600) */
.buyaca-app .bq-pc-price,
.buyaca-app .bq-pf-price,
.buyaca-app .bq-cv2-product-price {
    font-weight: 600 !important;
    letter-spacing: -0.4px !important;
}

/* Categorías, ubicaciones, fechas → 400, sutiles */
.buyaca-app .bq-pc-loc,
.buyaca-app .bq-pf-loc,
.buyaca-app .bq-pf-date,
.buyaca-app .buyaca-business-card-category,
.buyaca-app .bq-cv2-product-cat-label,
.buyaca-app .bq-cv2-product-date {
    font-weight: 400 !important;
    letter-spacing: 0.05px !important;
    text-transform: none !important;
    opacity: 0.72;
}

/* Padding interior más aireado para que respire */
.buyaca-app .bq-pc-body,
.buyaca-app .bq-pf-info,
.buyaca-app .bq-cv2-product-body {
    padding: 3px 5px 5px !important;
}

/* Eliminar pseudo-elementos antiguos que rompen el look limpio */
.buyaca-app .bq-pc::before,
.buyaca-app .bq-pf-card::before,
.buyaca-app .bq-pf-grid .bq-pf-card::before {
    display: none !important;
}

/* En modo claro, asegurar contraste correcto en los nombres.
   [Fix reportado] .bq-temu-biz-name se retira de este grupo: esta regla
   es de la época en que la tarjeta de negocio pautado tenía fondo claro
   (por eso forzaba texto oscuro). Ahora el panel de esa tarjeta es
   SIEMPRE oscuro (ver home-products-v2.css), así que este texto oscuro
   dejaba el nombre invisible (negro sobre un fondo casi negro). Las
   demás tarjetas de esta lista sí siguen sobre fondo claro y conservan
   el fix. */
.buyaca-app.bq-light-mode .bq-pc-name,
.buyaca-app.bq-light-mode .bq-pf-name,
.buyaca-app.bq-light-mode .bq-home-card-name,
.buyaca-app.bq-light-mode .bq-cv2-product-name,
.buyaca-app.bq-light-mode .buyaca-business-card-title {
    color: #1a1a1f !important;
}

html.bq-page-light .buyaca-app:not(.bq-light-mode) .bq-pc-name,
html.bq-page-light .buyaca-app:not(.bq-light-mode) .bq-pf-name,
html.bq-page-light .buyaca-app:not(.bq-light-mode) .bq-home-card-name,
html.bq-page-light .buyaca-app:not(.bq-light-mode) .bq-cv2-product-name,
html.bq-page-light .buyaca-app:not(.bq-light-mode) .buyaca-business-card-title {
    color: #1a1a1f !important;
}

/* Fin v8.8.11 */

/* ════════════════════════════════════════════════════════════════════════
   v8.8.12 — FIX BRUTAL: HEADER ESTÁTICO SIN PARPADEOS + BANNER SEPARADO
   ────────────────────────────────────────────────────────────────────────
   PROBLEMA RESUELTO #1 — Parpadeo del header:
   • El plugin tenía DOS sistemas de scroll vivos al mismo tiempo:
       (a) un JS legacy que añadía/quitaba la clase `.scrolled`
       (b) el JS nuevo v8.9.2 que añade `.bq-collapsed-all` / `.bq-only-filters`
   • Ambos competían cada frame → re-render rápido → parpadeo visible.
   • Mi v8.8.11 metía además `transform: translate3d(0,-100%,0)` que choca
     con `position: sticky` y el navegador entra en jitter.
   • SOLUCIÓN: el header queda CLAVADO en top:0 SIEMPRE. El JS puede
     seguir poniendo/quitando clases, pero el CSS las neutraliza:
     ningún transform, ningún opacity, ningún cambio de posición.

   PROBLEMA RESUELTO #2 — Header y banner pegados:
   • El banner no tenía background propio → heredaba el rosa del header.
   • SOLUCIÓN: el banner ahora tiene su propio background neutro
     (gris claro en light, oscuro en dark), padding/margen propios, y
     una sombra interna sutil que lo separa visualmente del header.
   ════════════════════════════════════════════════════════════════════════ */

/* ─────── HEADER 100% ESTÁTICO EN TOP:0 — TODAS LAS VARIANTES ─────── */
/* Cubre cada combinación de clases que el JS pueda añadir, en home y
   en productos. Nunca se mueve. Nunca se traduce. Nunca parpadea. */
.buyaca-app .bq-app-header,
.buyaca-app .bq-app-header.scrolled,
.buyaca-app .bq-app-header.bq-collapsed-all,
.buyaca-app .bq-app-header.bq-only-filters,
.buyaca-app .bq-app-header.scrolled.bq-collapsed-all,
.buyaca-app .bq-app-header.scrolled.bq-only-filters,
.buyaca-app .bq-app-header.bq-products-header,
.buyaca-app .bq-app-header.bq-products-header.scrolled,
.buyaca-app .bq-app-header.bq-products-header.bq-collapsed-all,
.buyaca-app .bq-app-header.bq-products-header.bq-only-filters,
.buyaca-app .bq-app-header.bq-products-header.scrolled.bq-collapsed-all,
.buyaca-app .bq-app-header.bq-products-header.scrolled.bq-only-filters,
.buyaca-app #bq-brand-topbar,
.buyaca-app #bq-brand-topbar.scrolled,
.buyaca-app #bq-brand-topbar.bq-collapsed-all,
.buyaca-app #bq-brand-topbar.bq-only-filters,
.buyaca-app #bq-brand-topbar.scrolled.bq-collapsed-all,
.buyaca-app #bq-brand-topbar.scrolled.bq-only-filters,
.buyaca-app #bq-products-topbar,
.buyaca-app #bq-products-topbar.scrolled,
.buyaca-app #bq-products-topbar.bq-collapsed-all,
.buyaca-app #bq-products-topbar.bq-only-filters,
.buyaca-app #bq-products-topbar.scrolled.bq-collapsed-all,
.buyaca-app #bq-products-topbar.scrolled.bq-only-filters {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100 !important;
    transform: none !important;
    /* ← clave: nunca se traduce */
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    will-change: auto !important;
    /* libera la GPU layer que causaba jitter */
    transition:
        box-shadow 0.25s ease !important;
    contain: layout style !important;
    /* aísla el layout para evitar reflows */
}

/* Logo wordmark — SIEMPRE visible, no se colapsa con scroll.
   [Fix reportado] Salvo con .bq-header-hidden (pedido nuevo: el logo debe
   ocultarse SINCRONIZADO con el buscador y "me interesa" al hacer scroll
   hacia abajo) — esta regla con !important en max-height/transition le
   ganaba a esa nueva animación y el logo no seguía el mismo ritmo que los
   otros dos botones. Se excluye ese estado con :not(). */
.buyaca-app .bq-app-header:not(.bq-header-hidden) .bq-header-logo-wrap,
.buyaca-app .bq-app-header.scrolled:not(.bq-header-hidden) .bq-header-logo-wrap,
.buyaca-app .bq-app-header.bq-collapsed-all:not(.bq-header-hidden) .bq-header-logo-wrap,
.buyaca-app .bq-app-header.bq-only-filters:not(.bq-header-hidden) .bq-header-logo-wrap,
.buyaca-app #bq-brand-topbar.scrolled:not(.bq-header-hidden) .bq-header-logo-wrap,
.buyaca-app #bq-brand-topbar.bq-collapsed-all:not(.bq-header-hidden) .bq-header-logo-wrap,
.buyaca-app #bq-products-topbar.scrolled:not(.bq-header-hidden) .bq-header-logo-wrap,
.buyaca-app #bq-products-topbar.bq-collapsed-all:not(.bq-header-hidden) .bq-header-logo-wrap {
    max-height: 60px !important;
    opacity: 1 !important;
    padding: 6px 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    transition: none !important;
    /* sin transition = sin parpadeo */
    visibility: visible !important;
}

/* Chips/filtros — siempre visibles y estables */
.buyaca-app .bq-app-header .bq-header-chips-wrap,
.buyaca-app .bq-app-header.scrolled .bq-header-chips-wrap,
.buyaca-app .bq-app-header.bq-collapsed-all .bq-header-chips-wrap,
.buyaca-app .bq-app-header.bq-only-filters .bq-header-chips-wrap,
.buyaca-app #bq-brand-topbar.scrolled .bq-header-chips-wrap,
.buyaca-app #bq-brand-topbar.bq-collapsed-all .bq-header-chips-wrap,
.buyaca-app #bq-products-topbar.scrolled .bq-header-chips-wrap,
.buyaca-app #bq-products-topbar.bq-collapsed-all .bq-header-chips-wrap {
    max-height: 80px !important;
    opacity: 1 !important;
    padding: 0 !important;
    pointer-events: auto !important;
    transform: none !important;
    transition: none !important;
    /* [FIX menú] mantener el scroll horizontal del menú al hacer scroll de la página */
    overflow-x: auto !important;
    overflow-y: hidden !important;
    touch-action: pan-x !important;
    visibility: visible !important;
}

/* Sombra de profundidad cuando el usuario hace scroll
   (única señal visual de que el header es sticky, sin animación de salto) */
/* [Purga] Regla vacía retirada. */

/* ─────── BANNER · ELEMENTO TOTALMENTE INDEPENDIENTE ─────── */
/* Vive bajo el header sticky con su propio background, padding y
   sombra interna. Si lo borras, el header sigue funcionando igual. */
.buyaca-app .bq-banner-section,
.buyaca-app .bq-app-header+.bq-banner-section,
.bq-app-header.bq-only-filters .bq-banner-section,
.bq-app-header.bq-collapsed-all .bq-banner-section,
.bq-app-header.bq-only-filters~.bq-banner-section,
.bq-app-header.bq-collapsed-all~.bq-banner-section {
    position: relative !important;
    z-index: 1 !important;
    margin: 0 !important;
    padding: 14px 0 8px !important;
    max-height: none !important;
    min-height: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    transition: none !important;

}

/* Modo claro · fondo gris suave, separado del rosa del header */
.buyaca-app.bq-light-mode .bq-banner-section,
html.bq-page-light .buyaca-app .bq-banner-section,
html.bq-page-light .buyaca-app:not(.bq-light-mode) .bq-banner-section {
    background: #f6f7f9 !important;
}

/* Modo oscuro · fondo casi negro */
html.bq-page-dark .buyaca-app .bq-banner-section,
.buyaca-app:not(.bq-light-mode):not([class*="bq-light"]) .bq-banner-section {
    background: #0d0d0f !important;

}

/* Hero banner (imagen Día de la madre) — limpio dentro del wrapper */
.buyaca-app .bq-banner-section .bq-hero-banner {
    margin: 4px 16px 10px !important;
    border-radius: 16px !important;

}

/* [Rediseño] Carrusel de negocios destacados: alineado al mismo ancho que
   Categorías/Feed de abajo, no edge-to-edge. Antes "margin:0" volvía a
   estirarlo a los 100% del viewport pisando el centrado de
   ui-refinements-v8814.css (misma especificidad, esta regla ganaba por
   orden de carga) — se alinea aquí directamente en vez de pelear cascada. */
.buyaca-app .bq-banner-section .bq-temu-carousel-wrap {
    margin: 14px 16px 16px !important;
    padding: 6px 0 !important;
}

@media (min-width: 768px) {
    .buyaca-app .bq-banner-section .bq-temu-carousel-wrap {
        margin: 14px auto 16px !important;
        max-width: 1200px !important;
    }
}

/* ─────── EVITAR REFLOWS Y JANK EN SCROLL ─────── */
/* Aislar el layout de las zonas grandes para que repintar el header
   no fuerce reflow del feed entero. Esto elimina la última fuente de
   parpadeo en pantallas con scroll continuo. */
.buyaca-app .bq-banner-section,
.buyaca-app .bq-red-zone,
.buyaca-app .bq-pf-zone,
.buyaca-app .bq-feed-zone,
.buyaca-app .bq-recomendados-zone {
    contain: layout style !important;
}

/* Forzar GPU compositing solo donde de verdad ayuda (header) */
.buyaca-app .bq-app-header {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Fin v8.8.12 */

/* ════════════════════════════════════════════════════════════════════════
   v8.8.13 — UNIFICA HEADER PRODUCTOS = NEGOCIOS + LOGO COLAPSABLE
   ────────────────────────────────────────────────────────────────────────
   • El logo BUY ACÁ se colapsa cuando hay scroll, reaparece al volver al top
   • La barra de búsqueda y los filtros siguen SIEMPRE visibles
   • El header de productos es ahora idéntico al de negocios (mismo JS,
     mismo CSS, mismo banner separado)
   • Sobrescribe a v8.8.12 que dejaba el logo siempre visible
   ════════════════════════════════════════════════════════════════════════ */

/* LOGO · estado por defecto (top de la página) — visible y aireado */
.buyaca-app .bq-app-header .bq-header-logo-wrap,
.buyaca-app #bq-brand-topbar .bq-header-logo-wrap,
.buyaca-app #bq-products-topbar .bq-header-logo-wrap,
.buyaca-app .bq-app-header.bq-products-header .bq-header-logo-wrap {
    max-height: 60px !important;
    opacity: 1 !important;
    padding: 6px 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    pointer-events: auto !important;
    transform: none !important;
    visibility: visible !important;
    transition:
        max-height 0.36s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.26s ease,
        padding 0.36s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* [Fix reportado] Este bloque colapsaba el logo ya con `.scrolled` (a solo
   8px de scroll, ver SCROLLED_THRESHOLD en products-home.php/home.php) —
   mucho antes que el buscador/"me interesa", que solo reaccionan a la
   clase nueva `.bq-header-hidden` (recién pasado 1x el alto del header).
   Resultado: el logo desaparecía de golpe mientras los otros dos seguían
   ahí — pedido explícito de que los 3 salgan SINCRONIZADOS. Se retira el
   trigger `.scrolled` de aquí; el logo ahora solo colapsa con
   `.bq-header-hidden`, igual que los otros dos (ver home-products-v2.css). */
.buyaca-app .bq-app-header.bq-header-hidden .bq-header-logo-wrap,
.buyaca-app #bq-brand-topbar.bq-header-hidden .bq-header-logo-wrap,
.buyaca-app #bq-products-topbar.bq-header-hidden .bq-header-logo-wrap,
.buyaca-app .bq-app-header.bq-products-header.bq-header-hidden .bq-header-logo-wrap {
    max-height: 0 !important;
    opacity: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/* SOMBRA del header cuando hay scroll · igual en home y productos */
/* [Purga] Regla vacía retirada. */

/* BANNER DE PRODUCTOS · misma separación visual que el de negocios.
   El selector :not() es para que aplique aunque no estén las clases
   bq-light-mode / bq-page-light (algunos contextos del products page
   no las heredan). Esto garantiza que SIEMPRE se vea separado. */
.buyaca-app .bq-app-header.bq-products-header+.bq-banner-section,
.buyaca-app .bq-app-header.bq-products-header~.bq-banner-section,
.buyaca-app #bq-products-topbar+.bq-banner-section,
.buyaca-app #bq-products-topbar~.bq-banner-section {
    background: #f6f7f9 !important;
    margin: 0 !important;
    padding: 14px 0 8px !important;

    position: relative !important;
    z-index: 1 !important;
}

/* Modo oscuro · banner de productos con fondo oscuro */
html.bq-page-dark .buyaca-app #bq-products-topbar~.bq-banner-section,
.buyaca-app:not(.bq-light-mode):not([class*="bq-light"]) .bq-app-header.bq-products-header~.bq-banner-section,
.buyaca-app:not(.bq-light-mode):not([class*="bq-light"]) #bq-products-topbar~.bq-banner-section {
    background: #0d0d0f !important;

}

/* Search-wrap legacy ".scrolled" — neutralizar el padding que producía salto.
   El plugin antiguo cambiaba padding-top/bottom de .bq-header-search-wrap-v8
   cuando se añadía .scrolled, causando un "jump" de 2px visible. */
.buyaca-app .bq-app-header.scrolled .bq-header-search-wrap,
.buyaca-app .bq-app-header.scrolled .bq-header-search-wrap-v8,
.buyaca-app #bq-brand-topbar.scrolled .bq-header-search-wrap,
.buyaca-app #bq-brand-topbar.scrolled .bq-header-search-wrap-v8,
.buyaca-app #bq-products-topbar.scrolled .bq-header-search-wrap,
.buyaca-app #bq-products-topbar.scrolled .bq-header-search-wrap-v8 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    transition: none !important;
}

/* Garantizar que .bq-header-search-wrap-v8 nunca se colapsa con scroll
   (regla legacy en línea ~37756 ponía padding distinto cuando .scrolled) */
.buyaca-app .bq-app-header .bq-header-search-wrap,
.buyaca-app .bq-app-header .bq-header-search-wrap-v8,
.buyaca-app .bq-app-header.scrolled .bq-header-search-wrap,
.buyaca-app .bq-app-header.scrolled .bq-header-search-wrap-v8 {
    max-height: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
}

/* HEADER PRODUCTOS · forzar mismo overflow que el header de home
   (algunos navegadores tratan overflow:hidden de .bq-products-header
   como contenedor de stacking que rompe position:sticky en hijos) */
.buyaca-app .bq-app-header.bq-products-header,
.buyaca-app #bq-products-topbar {
    overflow: visible !important;
}

/* El backdrop sigue siendo decorativo y no debe sobresalir */
.buyaca-app .bq-app-header.bq-products-header .bq-header-backdrop,
.buyaca-app #bq-products-topbar .bq-header-backdrop {
    overflow: hidden;
    border-radius: inherit;
}

/* Fin v8.8.13 */

/* ════════════════════════════════════════════════════════════════════════
   v8.8.14 — SEPARACIÓN BRUTAL DE BANNER + LOGO ANIMADO + CARDS ENRIQUECIDAS
   ────────────────────────────────────────────────────────────────────────
   1. Banner de productos AHORA es un bloque visualmente independiente
      (background propio, border-top, margin-top, sombra) — sin importar
      cómo esté el theme/wrapper, queda separado del header.
   2. Logo wordmark se oculta con animación SLIDE-UP elegante:
         transform: translateY(-100%) + opacity: 0 + max-height: 0
         + visibility delay para no parpadear al final
   3. Tarjeta producto destacado ahora muestra: imagen → precio →
      NOMBRE (1 línea con ...) → CIUDAD (con icono de ubicación)
   4. Tarjeta negocio destacado ahora muestra: banner → logo →
      NOMBRE → CATEGORÍA → DESCRIPCIÓN (2 líneas con ...)
   ════════════════════════════════════════════════════════════════════════ */

/* ─────── 1 · BANNER DE PRODUCTOS · SEPARACIÓN VISUAL TOTAL ─────── */
/* Se aplican TRES capas de separación a la vez para que sea imposible
   que se vea pegado al header sin importar el contexto:
     a) background propio (claro u oscuro según tema)
     b) border-top sólido que dibuja una línea fina y nítida
     c) margin-top: 0 + padding-top generoso
     d) box-shadow inset arriba que refuerza la separación */
.buyaca-app .bq-banner-section,
.buyaca-app .bq-app-header+.bq-banner-section,
.buyaca-app .bq-app-header.bq-products-header+.bq-banner-section,
.buyaca-app .bq-app-header.bq-products-header~.bq-banner-section,
.buyaca-app #bq-products-topbar+.bq-banner-section,
.buyaca-app #bq-products-topbar~.bq-banner-section,
.buyaca-app #bq-brand-topbar+.bq-banner-section,
.buyaca-app #bq-brand-topbar~.bq-banner-section {

    padding: 74px 0 10px !important;
    position: relative !important;
    z-index: 1 !important;
    display: block !important;

    overflow: visible !important;
    isolation: isolate;
}

/* Modo oscuro: banner casi negro, separación con línea clara sutil */
html.bq-page-dark .buyaca-app .bq-banner-section,
.buyaca-app:not(.bq-light-mode):not([class*="bq-light"]) .bq-banner-section,
.buyaca-app:not(.bq-light-mode):not([class*="bq-light"]) #bq-products-topbar+.bq-banner-section,
.buyaca-app:not(.bq-light-mode):not([class*="bq-light"]) #bq-products-topbar~.bq-banner-section {
    background: linear-gradient(180deg, #e35217 32%, #0d0d12 85%) !important;
    border-top: 0px solid rgba(255, 255, 255, 0.08) !important;

}

/* ─────── 2 · LOGO · ANIMACIÓN SLIDE-UP ELEGANTE ─────── */
/* SOBRESCRIBE v8.8.13. El logo ahora se desliza hacia arriba mientras
   se desvanece, en lugar de simplemente colapsar el max-height. Más
   refinado y se siente como una app nativa. */
.buyaca-app .bq-app-header .bq-header-logo-wrap,
.buyaca-app #bq-brand-topbar .bq-header-logo-wrap,
.buyaca-app #bq-products-topbar .bq-header-logo-wrap,
.buyaca-app .bq-app-header.bq-products-header .bq-header-logo-wrap {
    /* Estado por defecto: visible */
    max-height: 60px !important;
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    padding: 6px 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    pointer-events: auto !important;
    visibility: visible !important;
    transform-origin: top center;
    transition:
        max-height 0.40s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.22s ease-out,
        transform 0.40s cubic-bezier(0.22, 1, 0.36, 1),
        padding 0.40s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 0s !important;
}

/* [Fix reportado] Retriggereado: era `.scrolled` (dispara a solo 8px de
   scroll) y dejaba al logo desapareciendo mucho antes que el buscador y
   "me interesa" (esos dos solo reaccionan a `.bq-header-hidden`, que
   dispara pasado 1x el alto del header) — pedido explícito de que los 3
   salgan SINCRONIZADOS. Este es el bloque "final" de los 3 que había en
   este archivo peleando por el mismo selector (líneas ~954, ~1119 y
   este) — es el que realmente ganaba por ser el último en cascada, así
   que es el que importaba corregir. */
.buyaca-app .bq-app-header.bq-header-hidden .bq-header-logo-wrap,
.buyaca-app #bq-brand-topbar.bq-header-hidden .bq-header-logo-wrap,
.buyaca-app #bq-products-topbar.bq-header-hidden .bq-header-logo-wrap,
.buyaca-app .bq-app-header.bq-products-header.bq-header-hidden .bq-header-logo-wrap {
    /* Estado oculto: slide-up + fade + collapse */
    max-height: 0 !important;
    opacity: 0 !important;
    transform: translateY(-110%) scale(0.92) !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
    /* Visibility se aplica DESPUÉS de la animación (delay 0.40s) para no
       romper el efecto. Cuando vuelve a aparecer, es inmediato (delay 0s). */
    visibility: hidden !important;
    transition:
        max-height 0.40s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.30s ease-in,
        transform 0.40s cubic-bezier(0.55, 0, 0.68, 0.53),
        padding 0.40s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 0.40s !important;
}

/* ─────── 2b · BUSCADOR Y "ME INTERESA" · MISMA ANIMACIÓN EXACTA QUE EL LOGO ───────
   [Pedido] "que compartan EXACTAMENTE la misma animación de entrada y
   salida" — se copian los mismos valores/tiempos/curvas del bloque del
   logo de arriba (2) en vez de una animación distinta con igual
   duración: mismo max-height relativo, mismo transform slide+scale,
   misma transition. Antes vivían en home-products-v2.css con un
   collapse más simple (solo max-height+opacity) — se centraliza acá,
   junto al del logo, para que sea imposible que diverjan en el futuro. */
.buyaca-app .bq-app-header .bq-header-search-toggle,
.buyaca-app #bq-brand-topbar .bq-header-search-toggle,
.buyaca-app #bq-products-topbar .bq-header-search-toggle {
    max-height: 44px !important;
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    overflow: hidden !important;
    pointer-events: auto !important;
    visibility: visible !important;
    transform-origin: top center;
    transition:
        max-height 0.40s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.22s ease-out,
        transform 0.40s cubic-bezier(0.22, 1, 0.36, 1),
        margin 0.40s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 0s !important;
}

.buyaca-app .bq-app-header.bq-header-hidden .bq-header-search-toggle,
.buyaca-app #bq-brand-topbar.bq-header-hidden .bq-header-search-toggle,
.buyaca-app #bq-products-topbar.bq-header-hidden .bq-header-search-toggle {
    max-height: 0 !important;
    opacity: 0 !important;
    transform: translateY(-110%) scale(0.92) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    transition:
        max-height 0.40s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.30s ease-in,
        transform 0.40s cubic-bezier(0.55, 0, 0.68, 0.53),
        margin 0.40s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 0.40s !important;
}

/* [Purga] Secciones "3" (nombre+ubicación) y "4" (descripción de negocio)
   de la tarjeta Temu vieja retiradas — reemplazadas por el hero-slide
   (bq-ad-hero-*, ver assets/css/patches/admin-catalog-list-v1.css). */

/* ─────── 5 · LOGO BRAND TOPBAR · GARANTIZAR mismo trato ─────── */
/* [Fix reportado] ESTA era la causa real de "el logo se oculta muy
   rápido": el texto del wordmark tenía su PROPIO fade a opacity:0
   disparado por `.scrolled` (8px de scroll, 0.22s) — independiente y
   mucho más rápido que el colapso del contenedor (.bq-header-logo-wrap,
   ya sincronizado con .bq-header-hidden). El texto desaparecía solo,
   antes que buscador/"me interesa" ni empezaran a animar. Se retargetea
   a `.bq-header-hidden` con el mismo timing que los otros dos. */
.buyaca-app #bq-brand-topbar.bq-header-hidden .bq-wordmark,
.buyaca-app #bq-products-topbar.bq-header-hidden .bq-wordmark {
    transition: opacity .30s ease-in;
    opacity: 0;
}

/* Fin v8.8.14 */