/* ========================================================================= * BUYACÁ v8.8.14 — FIX BANNER CENTRADO + EDGE-TO-EDGE WRAPPER * * Anula v8.8.11 §1 (que limitaba banner-section a 80%) y v8.8.12 §6 * (que limitaba header-inner a 80%). Patrón nuevo: * .bq-banner-section → 100% viewport, fondo rosa edge-to-edge * .bq-banner-section > * → max-width 1200px centrado con margin:auto * .bq-app-header-inner → 100% con max-width 1200px centrado * * Append-only. No edita ninguna regla previa. * ========================================================================= */ /* -------- Tokens reutilizados --------------------------------------------- */ .buyaca-app { --bq814-content-max-w: 1200px; --bq814-content-pad-x: 16px; } /* ═════════════════════════════════════════════════════════════════════════ 1 · WRAPPER FULL-WIDTH — anula el width:80% de v8.8.11 ───────────────────────────────────────────────────────────────────────── En v8.8.11 (línea 56307-56318) las secciones intermedias quedaron al 80%. Aquí las llevamos a 100% del .buyaca-app (que ya es 100% del viewport desde v8.8.11 §1 que removió el max-width:80% original). ═════════════════════════════════════════════════════════════════════════ */ /* .buyaca-container se mantiene como contenedor de páginas internas (login, perfil, admin). Queda con su max-width:1200px original. */ body .buyaca-app > .buyaca-container { width: auto; max-width: var(--bq814-content-max-w); margin-left: auto; margin-right: auto; } /* ═════════════════════════════════════════════════════════════════════════ 2 · CONTENIDO INTERNO DEL BANNER · MAX-WIDTH 1200px CENTRADO ───────────────────────────────────────────────────────────────────────── El wrapper .bq-banner-section es full-width (fondo rosa edge-to-edge). Sus hijos directos — el hero banner y el carrusel — se limitan a 1200px y se centran con margin:auto. ═════════════════════════════════════════════════════════════════════════ */ .buyaca-app .bq-banner-section > .bq-hero-banner, .buyaca-app .bq-banner-section > .bq-temu-carousel-wrap { max-width: var(--bq814-content-max-w); margin-left: auto !important; margin-right: auto !important; box-sizing: border-box; } /* Hero banner — margin lateral en móvil, auto en desktop */ @media (max-width: 767px) { .buyaca-app .bq-banner-section > .bq-hero-banner { margin-left: var(--bq814-content-pad-x) !important; margin-right: var(--bq814-content-pad-x) !important; margin-bottom: 14px !important; } } @media (min-width: 768px) { .buyaca-app .bq-banner-section > .bq-hero-banner { margin-top: 0 !important; margin-bottom: 16px !important; /* margin-left/right ya son auto desde la regla base de arriba */ } } /* Carrusel — el track interno controla su propio padding, solo garantizamos que el wrap externo quede centrado y al ancho correcto. [Fix reportado] el padding asimétrico (5px/0) rompía el centrado que busca la regla de arriba — se quita, ya no hace falta (el margin:auto de arriba + el padding del track interno alcanzan). */ .buyaca-app .bq-banner-section > .bq-temu-carousel-wrap { width: 100%; padding-left: 0 !important; padding-right: 0 !important; } /* ═════════════════════════════════════════════════════════════════════════ 3 · CONTENIDO INTERNO DE LAS DEMÁS ZONAS · MAX-WIDTH 1200px CENTRADO ───────────────────────────────────────────────────────────────────────── Cada zona tiene un wrapper "-content" o "-inner". Si no existe, los children directos se centran. ═════════════════════════════════════════════════════════════════════════ */ @media (min-width: 1024px) { /* Zona roja (filtros + destacados) — usa .bq-red-zone-content */ .buyaca-app .bq-red-zone > .bq-red-zone-content { max-width: var(--bq814-content-max-w); margin-left: auto; margin-right: auto; padding-left: var(--bq814-content-pad-x); padding-right: var(--bq814-content-pad-x); box-sizing: border-box; } /* Feed zone — usa .bq-feed-inner (ya tiene max-width:1200px desde línea 31978, lo confirmamos aquí por consistencia) */ .buyaca-app .bq-feed-zone > .bq-feed-inner { max-width: var(--bq814-content-max-w); margin-left: auto; margin-right: auto; } /* Productos foreground — wrapper interno opcional */ .buyaca-app .bq-pf-zone > .bq-pf-inner, .buyaca-app .bq-pf-zone > .bq-pf-content { max-width: var(--bq814-content-max-w); margin-left: auto; margin-right: auto; padding-left: var(--bq814-content-pad-x); padding-right: var(--bq814-content-pad-x); box-sizing: border-box; } /* Recomendados zone */ .buyaca-app .bq-recomendados-zone > .bq-recomendados-inner, .buyaca-app .bq-recomendados-zone > .bq-recomendados-content { max-width: var(--bq814-content-max-w); margin-left: auto; margin-right: auto; padding-left: var(--bq814-content-pad-x); padding-right: var(--bq814-content-pad-x); box-sizing: border-box; } } /* ═════════════════════════════════════════════════════════════════════════ 4 · HEADER INNER · 100% CON MAX-WIDTH 1200px CENTRADO ───────────────────────────────────────────────────────────────────────── v8.8.12 §6 (línea 56955-56962) puso el header-inner a width:80%. Aquí lo dejamos al 100% con max-width:1200px para que quede alineado con el contenido del banner y del feed. ═════════════════════════════════════════════════════════════════════════ */ @media (min-width: 1024px) { body .buyaca-app .bq-app-header-inner { width: 100% !important; max-width: var(--bq814-content-max-w) !important; margin-left: auto !important; margin-right: auto !important; padding-left: var(--bq814-content-pad-x); padding-right: var(--bq814-content-pad-x); box-sizing: border-box; } } /* ═════════════════════════════════════════════════════════════════════════ 5 · BANNER · ASEGURAR FONDO ROSA EDGE-TO-EDGE ───────────────────────────────────────────────────────────────────────── El fondo rosa ya está bien definido en v8.8.12 §1 (línea 56674-56685). Aquí solo reforzamos que cubra todo el ancho sin gaps laterales, y anulamos cualquier margin lateral residual del wrapper. ═════════════════════════════════════════════════════════════════════════ */ body .buyaca-app > .bq-banner-section { margin-left: 0 !important; margin-right: 0 !important; /* padding-left/right a 0 — el padding lateral lo manejan los hijos (.bq-hero-banner, .bq-temu-carousel-wrap) para que el fondo rosa llegue siempre al borde de la pantalla. */ padding-left: 0 !important; padding-right: 0 !important; /* Width 100% explícito por si alguna regla heredada lo cambió */ width: 100% !important; box-sizing: border-box; } /* ═════════════════════════════════════════════════════════════════════════ 6 · FOOTER · MANTIENE COMPORTAMIENTO EXISTENTE ───────────────────────────────────────────────────────────────────────── El footer ya queda full-width gracias a v8.8.11 §1 (que removió el max-width:80% del .buyaca-app). Su inner está limitado a 720/880px en v8.8.12 §5. No tocamos nada del footer aquí. ═════════════════════════════════════════════════════════════════════════ */ /* Fin v8.8.14 */