/* ========================================================================= * BUYACÁ v8.8.11 — HEADER/FOOTER FULL-WIDTH + BANNER ROSA + LIMPIEZA * ----------------------------------------------------------------------- * Capa de refinamiento sobre v8.8.10. Append-only. Sin !important salvo * donde es estrictamente necesario para anular reglas previas con * !important. * ========================================================================= */ /* -------- Tokens locales reutilizables ---------------------------------- */ .buyaca-app { --bq811-banner-bg-light: linear-gradient(180deg, #FFE7F1 0%, #FFF1F6 55%, #FFF7FB 100%); --bq811-banner-bg-dark: linear-gradient(180deg, #1a1015 0%, #0f0a0d 100%); --bq811-card-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.05); --bq811-card-shadow-hover: 0 6px 18px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04); --bq811-ease: cubic-bezier(0.22, 1, 0.36, 1); --bq811-dur: 220ms; --bq811-radius-soft: 12px; --bq811-content-max-w: 1200px; } /* ═════════════════════════════════════════════════════════════════════════ 1 · DESKTOP: HEADER + FOOTER FULL-WIDTH, CONTENIDO INTERMEDIO 80% ───────────────────────────────────────────────────────────────────────── La regla original (línea 31416) restringía .buyaca-app a 80% en desktop con box-shadow lateral. Eso producía: a) la "capa blanca" a los lados del header, b) la sombra que parecía un halo en el wrapper. Aquí restauramos el wrapper a 100% del viewport y aplicamos el límite de 80% sólo a las secciones de contenido intermedias. ═════════════════════════════════════════════════════════════════════════ */ @media (min-width: 1024px) { /* Especificidad mayor: body .buyaca-app vs .buyaca-app */ body .buyaca-app { max-width: none; margin-left: 0; margin-right: 0; } /* Bottom nav: también full-width para que no quede flotando suelta. */ body .buyaca-bottom-nav { max-width: none; left: 0 !important; /* anula left:50% !important de regla previa */ transform: none; } /* Contenido intermedio: conserva el ancho visual previo (~80%). Se aplica sólo a las secciones intermedias — no al header ni al footer. */ body .buyaca-app>.bq-banner-section, body .buyaca-app>.bq-red-zone, body .buyaca-app>.bq-pf-zone, body .buyaca-app>.bq-feed-zone, body .buyaca-app>.bq-recomendados-zone, body .buyaca-app>.buyaca-container, body .buyaca-app>.bq-cv2-tab-content { margin-left: auto; margin-right: auto; } } /* ═════════════════════════════════════════════════════════════════════════ 2 · ELIMINAR SOMBRAS RESIDUALES DEL WRAPPER Y HEADERS ═════════════════════════════════════════════════════════════════════════ */ /* El footer también sin sombra superior agresiva */ .buyaca-app .bq-footer { border-top: none; } /* ═════════════════════════════════════════════════════════════════════════ 3 · BANNER · FONDO ROSA QUE ARMONIZA CON EL HEADER ───────────────────────────────────────────────────────────────────────── Anula las reglas previas que pintaban .bq-banner-section con #f6f7f9. Para vencer a las reglas con !important de v8.8.13/v8.8.14, usamos mayor especificidad combinada con !important sólo donde es necesario. ═════════════════════════════════════════════════════════════════════════ */ /* Modo claro · degradado rosa pastel suave */ html.bq-page-light body .buyaca-app .bq-banner-section, html.bq-page-light body .buyaca-app .bq-app-header+.bq-banner-section, html.bq-page-light body .buyaca-app .bq-app-header.bq-products-header+.bq-banner-section, html.bq-page-light body .buyaca-app .bq-app-header.bq-products-header~.bq-banner-section, html.bq-page-light body .buyaca-app #bq-products-topbar+.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, html.bq-page-light body .buyaca-app #bq-brand-topbar~.bq-banner-section, body .buyaca-app.bq-light-mode .bq-banner-section { background: var(--bq811-banner-bg-light) !important; border-top: none !important; padding: 16px 0 14px !important; position: relative; z-index: 1; } /* Modo oscuro · conserva contraste original pero sin la franja blanca */ html.bq-page-dark body .buyaca-app .bq-banner-section, html.bq-page-dark body .buyaca-app #bq-products-topbar+.bq-banner-section, html.bq-page-dark body .buyaca-app #bq-products-topbar~.bq-banner-section, body .buyaca-app:not(.bq-light-mode):not([class*="bq-light"]) .bq-banner-section { background: var(--bq811-banner-bg-dark) !important; border-top: none !important; } /* ═════════════════════════════════════════════════════════════════════════ 4 · HERO BANNER · BORDES Y SOMBRA REFINADAS ═════════════════════════════════════════════════════════════════════════ */ .buyaca-app .bq-banner-section .bq-hero-banner { margin: 0 16px 14px; border-radius: 18px; transition: transform var(--bq811-dur) var(--bq811-ease), box-shadow var(--bq811-dur) var(--bq811-ease); } .buyaca-app .bq-banner-section .bq-hero-banner:hover { transform: translateY(-2px); } @media (min-width: 768px) { .buyaca-app .bq-banner-section .bq-hero-banner { margin: 0 auto 16px; max-width: 1200px; border-radius: 22px; } } /* [Purga] Secciones "5", "6" y "7" (sombras, ocultar decoraciones, logo top-left 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). */ /* ═════════════════════════════════════════════════════════════════════════ 8 · AJUSTES RESPONSIVE ═════════════════════════════════════════════════════════════════════════ */ @media (max-width: 480px) { .buyaca-app .bq-banner-section .bq-hero-banner { margin: 0 12px 12px; border-radius: 16px; } } /* [Purga] Sección "9" (fondo blanco de .bq-header-backdrop) retirada — ese elemento tiene "display:none!important" permanente en frontend.css, nunca se pinta; la regla era inalcanzable. El fondo real del header lo fija .bq-app-header directamente (social-redesign-v1.css, sección 1). */ /* Fin v8.8.11 */