/* =========================================================================
 *  BUYACÁ v8.8.12 — REFINAMIENTO INTEGRAL ELEGANTE
 *  Pulido final sobre v8.8.11. Append-only.
 * ========================================================================= */

/* -------- Tokens locales --------------------------------------------- */
.buyaca-app {
    /* [Purga] --bq812-rose-100/200/500/600 quitados: sin usos restantes tras
       neutralizar el degradado rosa del banner y el hover rosa del footer. */
    --bq812-ink-900:     #0F0A12;
    --bq812-ink-500:     #6B5C68;

    --bq812-radius-card: 16px;
    --bq812-radius-pill: 999px;
    --bq812-ease:        cubic-bezier(0.22, 1, 0.36, 1);
    --bq812-dur:         220ms;
    --bq812-dur-fast:    150ms;

}

/* ═════════════════════════════════════════════════════════════════════════
   1 · BANNER · TONO ROSA REFINADO + TEXTURA SUTIL
   ─────────────────────────────────────────────────────────────────────────
   Mejora el degradado del banner (v8.8.11) con tonos más cálidos y un
   patrón de puntos casi imperceptible que da profundidad sin distraer.
   ═════════════════════════════════════════════════════════════════════════ */

html.bq-page-light body .buyaca-app .bq-banner-section,
html.bq-page-light body .buyaca-app #bq-products-topbar ~ .bq-banner-section,
html.bq-page-light body .buyaca-app #bq-brand-topbar ~ .bq-banner-section,
body .buyaca-app.bq-light-mode .bq-banner-section {
    /* [Pedido] "quiero que el padding esté en noventa píxeles" — este es el
       espaciado real que separa el banner del menú (no el margin-top que
       había agregado en social-redesign-v1.css, ya retirado por duplicado). */
    padding: 90px 0 0px !important;
}

/* ═════════════════════════════════════════════════════════════════════════
   2 · HEADER · CHIPS REFINADOS, SEARCH MÁS LIMPIA
   ═════════════════════════════════════════════════════════════════════════ */

/* Chips de filtros: bordes más sutiles, mejor focus, animación al hover */
.buyaca-app .bq-home-filter-pill,
.buyaca-app .bq-filter-select-wrap {
    border-radius: var(--bq812-radius-pill);
    transition: transform var(--bq812-dur-fast) var(--bq812-ease),
                box-shadow var(--bq812-dur-fast) var(--bq812-ease),
                background var(--bq812-dur-fast) ease;
}
.buyaca-app .bq-home-filter-pill:hover,
.buyaca-app .bq-filter-select-wrap:hover {
    transform: translateY(-1px);
    
}
.buyaca-app .bq-home-filter-pill:active {
    transform: translateY(0);
}

/* Search bar: sombra interior sutil para sensación de profundidad */
.buyaca-app .bq-app-header-search {
    transition: transform var(--bq812-dur) var(--bq812-ease),
                box-shadow var(--bq812-dur) var(--bq812-ease);
}
.buyaca-app .bq-app-header-search:focus-within {
    transform: translateY(-1px);
}

/* Espaciado vertical del header inner: más respirable en desktop */
@media (min-width: 1024px) {
    .buyaca-app .bq-app-header-inner {
        padding: 0px 0px 12px;
        gap: 0px;
    }
}

/* [Purga] Secciones "3" y "4" (tipografía de .bq-temu-prod-card/
   .bq-temu-biz-card) retiradas — reemplazadas por el hero-slide
   (bq-ad-hero-*, ver assets/css/patches/admin-catalog-list-v1.css). */

/* ═════════════════════════════════════════════════════════════════════════
   5 · FOOTER · FULL-WIDTH ELEGANTE CON ACENTO ROSA
   ─────────────────────────────────────────────────────────────────────────
   En desktop el footer queda 100% del viewport (gracias a v8.8.11) y
   aquí añadimos una línea rosa fina arriba que conecta visualmente con
   el resto de la página, además de mejorar tipografía y espaciado.
   ═════════════════════════════════════════════════════════════════════════ */

.buyaca-app .bq-footer {
    background: linear-gradient(180deg, #15101A 0%, #0F0A12 100%);
    color: #CFC3CC;
    padding: 32px 16px 18px;
    border-radius: 0;
    border-top: none;
    margin-top: 32px;
    position: relative;
}

/* Línea gradient rosa fina en la parte superior del footer */
.buyaca-app .bq-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 92, 141, 0.4) 30%,
        rgba(255, 92, 141, 0.8) 50%,
        rgba(255, 92, 141, 0.4) 70%,
        transparent 100%);
    pointer-events: none;
}

/* Inner del footer queda con max-width centrado dentro del full-width */
.buyaca-app .bq-footer-inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

/* Brand del footer — más prominente */
.buyaca-app .bq-footer-brand {
    margin-bottom: 14px;
}
.buyaca-app .bq-footer .bq-wordmark--footer {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.5px;
}

/* Links del footer — espaciado más amplio */
.buyaca-app .bq-footer-links {
    margin: 14px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
}
.buyaca-app .bq-footer-links a {
    color: #CFC3CC;
    font-weight: 500;
    font-size: 13px;
    padding: 4px 0;
    transition: color var(--bq812-dur-fast) ease;
}
.buyaca-app .bq-footer-links a:hover {
    /* [Fix] Rosa fuera de marca (--bq812-rose-500) — el hover del footer debe
       ser el azul de marca, igual que la regla base en frontend.css:5548. */
    color: var(--bq-primary);
}
.buyaca-app .bq-footer-sep {
    color: #4A3F47;
    margin: 0 10px;
}

/* Copyright más sutil */
.buyaca-app .bq-footer-copy {
    color: #6B5C68;
    font-size: 11.5px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Desktop: padding lateral más generoso (el wrapper externo ya es 100%) */
@media (min-width: 1024px) {
    .buyaca-app .bq-footer {
        padding: 40px 24px 22px;
    }
    .buyaca-app .bq-footer-inner {
        max-width: 880px;
    }
 
}

/* ═════════════════════════════════════════════════════════════════════════
   6 · ALINEACIÓN HEADER ←→ CONTENIDO INTERMEDIO EN DESKTOP
   ─────────────────────────────────────────────────────────────────────────
   v8.8.11 puso el contenido intermedio al 80%. Aquí garantizamos que el
   inner del header también respete ese ancho, de modo que el logo y los
   filtros queden alineados con el inicio del banner y de las cards.
   ═════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {
    .buyaca-app .bq-app-header-inner {
        width: 80%;
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ═════════════════════════════════════════════════════════════════════════
   7 · DETALLES FINALES · LIMPIEZA DE INCONSISTENCIAS VISUALES
   ═════════════════════════════════════════════════════════════════════════ */

/* Suavizar el borde inferior entre header y banner en light mode */
html.bq-page-light body .buyaca-app .bq-app-header,
body .buyaca-app.bq-light-mode .bq-app-header {
    border-bottom: none;
}

/* Track del carrusel — gap más cómodo en desktop */
@media (min-width: 1024px) {
    .buyaca-app .bq-temu-carousel-track {
        gap: 14px;
        padding: 8px 24px 16px;
    }
}

/* Asegurar que las cards no quedan apretadas al borde en móvil */
@media (max-width: 480px) {
    .buyaca-app .bq-temu-carousel-track {
        padding: 0px;
    }
}

/* Fin v8.8.12 */