/* ==========================================================
   ShOPIseLL — Marketplace Discovery (BUILD SH-010)

   No define colores nuevos: reutiliza los tokens ya declarados
   en :root dentro de estilos.css (--brand, --surface, --muted,
   --radius...), que se carga antes que este archivo. Es el
   primer paso hacia un Design System real: un solo lugar de
   verdad para el color/tipografía, en vez de que cada módulo
   invente su propia paleta (que es justo lo que pasaba antes
   entre el sitio público y Nebula).
   ========================================================== */

.mkt-discovery { padding-top: 8px; }

/* ---------- HERO ---------- */
.mkt-hero {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 40px;
    padding: 48px 16px 8px;
}

.mkt-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--brand2);
    background: rgba(240,26,36,0.1);
    border: 1px solid rgba(240,26,36,0.3);
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 18px;
}

.mkt-hero-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--brand2);
    box-shadow: 0 0 8px var(--brand2);
}

.mkt-hero-title {
    font-family: 'Syne', sans-serif;
    font-weight: 800;
    font-size: clamp(28px, 5vw, 44px);
    line-height: 1.15;
    color: var(--color-texto-claro);
    margin-bottom: 14px;
}

.mkt-hero-title .highlight {
    background: linear-gradient(90deg, var(--brand), var(--brand2));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

.mkt-hero-sub {
    color: var(--muted);
    font-size: 15.5px;
    margin-bottom: 26px;
}

.mkt-hero-cta {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin: 22px 0 34px;
    flex-wrap: wrap;
}

/* ---------- BUSCADOR ---------- */
.mkt-search-wrap { max-width: 560px; margin: 0 auto; position: relative; }

.mkt-search-inner {
    display: flex; align-items: center; gap: 10px;
    background: var(--surface);
    border: 1px solid var(--color-borde);
    border-radius: var(--radius);
    padding: 13px 18px;
    transition: border-color .15s;
}
.mkt-search-inner:focus-within { border-color: var(--brand); }

.mkt-search-icon { color: var(--muted); }

.mkt-search-input {
    flex: 1; background: none; border: none; outline: none;
    color: var(--color-texto-claro); font-size: 14.5px; font-family: inherit;
}
.mkt-search-input::placeholder { color: var(--muted); }

.mkt-search-clear {
    background: none; border: none; color: var(--muted); cursor: pointer; padding: 4px;
}
.mkt-search-clear:hover { color: var(--brand2); }

.mkt-search-suggestions {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    background: var(--surface-2); border: 1px solid var(--color-borde);
    border-radius: var(--radius-sm); z-index: 20;
}

/* ---------- STATS ---------- */
.mkt-stats {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 28px;
}
.mkt-stat-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mkt-stat-num { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 20px; color: #fff; }
.mkt-stat-num i { color: #FFC861; font-size: 15px; }
.mkt-stat-lbl { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

/* ---------- SECCIONES ---------- */
.mkt-section { max-width: 1200px; margin: 0 auto 46px; padding: 0 16px; }
.mkt-section-head { margin-bottom: 18px; }
.mkt-section-title {
    font-family: 'Syne', sans-serif; font-weight: 800; font-size: 22px; color: #fff;
    margin-bottom: 4px;
}
.mkt-section-sub { color: var(--muted); font-size: 13.5px; }
.mkt-section-premium .mkt-section-title { color: #FFD86B; }

.mkt-empty-msg { color: var(--muted); font-size: 14px; text-align: center; padding: 24px 0; }

/* ---------- QUICK FILTERS ---------- */
.mkt-quick-filters {
    display: flex; gap: 10px; overflow-x: auto; padding: 4px 16px 18px;
    max-width: 1200px; margin: 0 auto 30px;
    scrollbar-width: thin;
}
.mkt-quick-filters::-webkit-scrollbar { height: 5px; }
.mkt-quick-filters::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 4px; }

.mkt-chip {
    flex: 0 0 auto;
    background: var(--surface);
    border: 1px solid var(--color-borde);
    color: var(--color-texto-claro);
    padding: 9px 18px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: .15s;
    white-space: nowrap;
}
.mkt-chip:hover { border-color: var(--brand); }
.mkt-chip.active {
    background: linear-gradient(90deg, var(--brand), var(--brand2));
    border-color: transparent;
    color: #fff;
}

/* ---------- COLECCIONES ---------- */
.mkt-collections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}
.mkt-collection-card {
    background: var(--surface);
    border: 1px solid var(--color-borde);
    border-radius: var(--radius);
    padding: 22px 18px;
    display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
    cursor: pointer;
    transition: transform .18s, border-color .18s, box-shadow .18s;
    color: var(--color-texto-claro);
    font-family: inherit;
    text-align: left;
}
.mkt-collection-card:hover {
    transform: translateY(-3px);
    border-color: var(--brand);
    box-shadow: var(--sombra-primaria);
}
.mkt-collection-icon { font-size: 26px; }
.mkt-collection-title { font-weight: 700; font-size: 14.5px; }
.mkt-collection-count { font-size: 12px; color: var(--muted); }

/* ---------- STORE CARDS ---------- */
.mkt-stores-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
}
.mkt-stores-grid-wide { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

.mkt-store-card {
    position: relative;
    display: block;
    background: var(--surface);
    border: 1px solid var(--color-borde);
    border-radius: var(--radius);
    padding: 20px;
    text-decoration: none;
    color: var(--color-texto-claro);
    transition: transform .18s, border-color .18s, box-shadow .18s;
}
.mkt-store-card:hover {
    transform: translateY(-4px);
    border-color: var(--brand);
    box-shadow: var(--sombra-primaria);
}
.mkt-store-card-premium {
    border-color: rgba(255,216,107,0.4);
    background: linear-gradient(160deg, var(--surface) 60%, rgba(255,216,107,0.05));
}
.mkt-store-card-premium:hover { box-shadow: 0 0 24px rgba(255,216,107,0.22); border-color: #FFD86B; }

.mkt-card-badge {
    position: absolute; top: 14px; right: 14px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
    padding: 4px 9px; border-radius: 7px;
}
.mkt-card-badge-premium { background: rgba(255,216,107,0.15); color: #FFD86B; border: 1px solid rgba(255,216,107,.35); }
.mkt-card-badge-new { background: rgba(99,255,157,0.15); color: #63FF9D; border: 1px solid rgba(99,255,157,.35); }

.mkt-card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.mkt-card-logo {
    width: 46px; height: 46px; border-radius: 12px;
    background: linear-gradient(135deg, var(--brand), var(--brand2));
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 15px; color: #fff; flex-shrink: 0; overflow: hidden;
}
.mkt-card-logo img { width: 100%; height: 100%; object-fit: cover; }
.mkt-card-name { font-weight: 700; font-size: 15px; }
.mkt-card-rating { font-size: 12px; color: var(--muted); margin-top: 2px; }
.mkt-card-rating i { color: #FFC861; }

.mkt-card-stats { display: flex; gap: 14px; font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.mkt-card-stats i { margin-right: 4px; }

.mkt-card-thumbs { display: flex; gap: 6px; margin-bottom: 14px; }
.mkt-mini-thumb {
    width: 42px; height: 42px; border-radius: 8px; overflow: hidden;
    background: var(--surface-2); display: flex; align-items: center; justify-content: center;
    color: var(--muted); font-size: 13px;
}
.mkt-mini-thumb img { width: 100%; height: 100%; object-fit: cover; }

.mkt-card-cta {
    font-size: 12.5px; font-weight: 700; color: var(--brand2);
    display: flex; align-items: center; gap: 6px;
}

/* ---------- SKELETON LOADING ---------- */
.mkt-skeleton {
    background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 37%, var(--surface) 63%);
    background-size: 400% 100%;
    animation: mkt-shimmer 1.4s ease infinite;
    min-height: 190px;
    border: 1px solid var(--color-borde);
}
.mkt-skeleton-premium { border-color: rgba(255,216,107,0.25); }

@keyframes mkt-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* ---------- CARGA PROGRESIVA DEL GRID PÚBLICO ---------- */
.mkt-load-more-wrap { display: flex; justify-content: center; margin-top: 24px; }
.mkt-load-more {
    background: transparent; border: 1px solid var(--color-borde); color: var(--color-texto-claro);
    padding: 10px 18px; border-radius: 999px; font-size: 13px; font-weight: 700; cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.mkt-load-more:hover:not(:disabled) { border-color: var(--brand); color: var(--brand2); background: rgba(255,255,255,.03); }
.mkt-load-more:disabled { opacity: .55; cursor: wait; }

/* Compatibilidad de estilos para otras vistas que aún usen paginación. */
.mkt-pagination {
    display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 26px;
}
.mkt-page-btn {
    background: var(--surface); border: 1px solid var(--color-borde); color: var(--color-texto-claro);
    padding: 9px 16px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; cursor: pointer;
}
.mkt-page-btn:hover:not(:disabled) { border-color: var(--brand); color: var(--brand2); }
.mkt-page-btn:disabled { opacity: .4; cursor: not-allowed; }
.mkt-page-info { color: var(--muted); font-size: 13px; }

@media (max-width: 540px) {
    .mkt-pagination{gap:8px;margin-top:18px}
    .mkt-page-btn{padding:8px 10px;font-size:11px}
    .mkt-page-info{min-width:54px;text-align:center;font-size:11px}
}

/* ---------- Catálogo de productos (legacy), separación visual ---------- */
#catalogo-productos-legacy {
    margin-top: 12px;
    padding-top: 46px;
    border-top: 1px solid var(--color-borde);
}
.mkt-legacy-head { margin-bottom: 18px; }

/* ---------- Tienda Online: shell de navegación ---------- */
.tienda-online-head {
    max-width: 1200px;
    margin: 0 auto 28px;
    padding: 26px 22px 0;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    text-align: left;
}
.tienda-online-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--brand2);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.tienda-online-title {
    font-family: 'Syne', sans-serif;
    color: #fff;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.05;
    margin-bottom: 8px;
}
.tienda-online-subtitle {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.55;
    max-width: 570px;
}
.tienda-online-tabs {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: var(--surface-2);
    border: 1px solid var(--color-borde);
    border-radius: 12px;
    flex-shrink: 0;
}
.tienda-online-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 126px;
    padding: 11px 16px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    transition: .18s ease;
}
.tienda-online-tab:hover { color: #fff; background: rgba(255,255,255,.05); }
.tienda-online-tab.active {
    color: #fff;
    background: linear-gradient(135deg, var(--brand), var(--brand2));
    box-shadow: 0 8px 20px rgba(240,26,36,.2);
}
.tienda-view { animation: tiendaViewIn .2s ease both; }
@keyframes tiendaViewIn {
    from { opacity: .4; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- Catálogo de productos: toolbar y tarjetas ---------- */
.catalogo-view-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--color-texto-claro);
    font-size: 13px;
    font-weight: 700;
}
.catalogo-view-label i { color: var(--brand2); }
.catalogo-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 18px 0 14px;
}
.catalogo-sort-wrap { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.catalogo-sort-wrap select {
    background: var(--surface-2);
    border: 1px solid var(--color-borde);
    border-radius: 9px;
    color: var(--color-texto-claro);
    padding: 9px 12px;
    font: inherit;
    outline: none;
}
.catalogo-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 30px;
    gap: 12px;
    margin: 8px 0 14px;
}
.catalogo-resumen { color: var(--muted); font-size: 12.5px; }
.btn-texto {
    background: transparent;
    border: 0;
    color: var(--brand2);
    font-size: 12.5px;
    font-weight: 700;
    padding: 6px 0;
}
.btn-texto:hover { color: #fff; }

.productos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
    align-items: stretch;
}
.producto-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: linear-gradient(155deg, rgba(24,24,31,.98), rgba(17,17,24,.98));
    border: 1px solid var(--color-borde);
    border-radius: var(--radius);
    text-align: left;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.producto-card:hover {
    transform: translateY(-4px);
    border-color: rgba(240,26,36,.5);
    box-shadow: 0 14px 30px rgba(0,0,0,.28), var(--sombra-primaria);
}
.producto-card-media {
    position: relative;
    height: 190px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--surface-3), var(--surface));
}
.producto-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.producto-card:hover .producto-card-media img { transform: scale(1.04); }
.producto-card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(8,8,15,.78);
    border: 1px solid rgba(255,255,255,.12);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.producto-card-badge.featured { background: rgba(255,200,97,.15); border-color: rgba(255,200,97,.35); color: #FFD86B; }
.producto-card-body { display: flex; flex: 1; flex-direction: column; padding: 15px; }
.producto-card-category { color: var(--brand2); font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 6px; }
.producto-card h3 { color: #fff; font-family: 'Syne', sans-serif; font-size: 16px; line-height: 1.25; margin-bottom: 7px; }
.producto-card-description { color: var(--muted); font-size: 12px; line-height: 1.45; min-height: 34px; margin-bottom: 10px; }
.producto-card-meta { display: flex; flex-wrap: wrap; gap: 6px; min-height: 22px; margin-bottom: 12px; }
.producto-card-tag { padding: 4px 8px; border-radius: 999px; background: rgba(255,255,255,.06); color: var(--muted); font-size: 10px; font-weight: 700; }
.producto-card-price-row { display: flex; align-items: baseline; gap: 8px; margin-top: auto; margin-bottom: 5px; }
.producto-card-price { color: #fff; font-family: 'Syne', sans-serif; font-size: 19px; font-weight: 800; }
.producto-card-old-price { color: var(--muted); font-size: 11px; text-decoration: line-through; }
.producto-card-store { overflow: hidden; color: var(--muted); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 13px; }
.producto-card-store i { color: var(--brand2); margin-right: 4px; }
.producto-card .btn-comprar { width: 100%; justify-content: center; margin: 0; }
.producto-card .btn-comprar:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
    .mkt-hero { padding-top: 28px; }
    .mkt-stats { gap: 18px; }
    .mkt-stores-grid, .mkt-stores-grid-wide { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .tienda-online-head { align-items: stretch; flex-direction: column; padding: 18px 8px 0; gap: 16px; }
    .tienda-online-tabs { width: 100%; }
    .tienda-online-tab { flex: 1; min-width: 0; padding: 10px 8px; }
    .catalogo-toolbar { align-items: stretch; flex-direction: column; }
    .catalogo-sort-wrap { justify-content: space-between; }
    .catalogo-sort-wrap select { flex: 1; }
    .productos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .producto-card-media { height: 145px; }
    .producto-card-body { padding: 12px; }
    .producto-card h3 { font-size: 14px; }
    .producto-card-description { font-size: 11px; }
    .producto-card-price { font-size: 16px; }
}

@media (max-width: 390px) {
    .productos-grid { grid-template-columns: 1fr; }
}


/* =========================================================
   REDISEÑO INTEGRAL — MARKETPLACE ShOpiSELL
========================================================= */
.tienda-online-head {
    position: relative;
    max-width: 1400px;
    margin: 0 28px 18px;
    padding: 28px 30px;
    align-items: center;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;
    background: linear-gradient(120deg, rgba(21,24,33,.98), rgba(17,10,24,.94));
    box-shadow: 0 18px 44px rgba(0,0,0,.26);
}
.tienda-online-title { max-width: 620px; color: #fff; }
.tienda-online-subtitle { max-width: 700px; }
.tienda-online-tabs { box-shadow: 0 10px 24px rgba(0,0,0,.22); }
.tienda-online-tab { min-width: 145px; }
.mkt-discovery { max-width: 1400px; padding: 0 28px; }
.mkt-hero {
    max-width: none;
    margin: 0 0 22px;
    padding: 42px 28px 30px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 20px;
    background:
        radial-gradient(circle at 80% 30%, rgba(245,31,72,.22), transparent 28%),
        linear-gradient(135deg, rgba(17,19,28,.98), rgba(28,12,27,.96));
    box-shadow: 0 18px 48px rgba(0,0,0,.26);
}
.mkt-hero-title { font-size: clamp(34px, 5vw, 58px); letter-spacing: -1.8px; }
.mkt-hero-sub { max-width: 650px; margin-left: auto; margin-right: auto; color: #b4b7c2; }
.mkt-hero-cta { margin: 20px 0 26px; }
.mkt-hero-cta .btn-outline { min-height: 44px; padding: 0 18px; border-radius: 10px; }
.mkt-search-wrap { max-width: 680px; }
.mkt-search-inner { min-height: 54px; background: rgba(7,9,14,.72); border-color: rgba(255,255,255,.14); }
.mkt-stats { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.09); }
.mkt-quick-filters { max-width: none; margin: 0 0 28px; padding: 6px 0 14px; }
.mkt-chip { background: rgba(20,23,31,.94); }
.mkt-section { max-width: none; padding: 0; }
.mkt-section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.mkt-section-title { font-size: 24px; }
.mkt-collections-grid { grid-template-columns: repeat(6, minmax(130px, 1fr)); gap: 12px; }
.mkt-collection-card { min-height: 122px; padding: 18px 15px; background: linear-gradient(145deg, #171a22, #0e1016); }
.mkt-stores-grid, .mkt-stores-grid-wide { gap: 14px; }
.mkt-store-card { background: linear-gradient(155deg, rgba(24,27,36,.98), rgba(13,15,21,.98)); }
.mkt-store-card:hover { transform: translateY(-5px); }

.home-trust-strip-hero {
    grid-column: 1 / -1;
    width: 100%;
    margin: 14px 0 0;
    position: relative;
    z-index: 3;
    background: rgba(9,11,17,.72);
}
.home-trust-strip-hero .home-trust-item { padding-top: 8px; padding-bottom: 8px; }

@media (max-width: 900px) {
    .tienda-online-head { margin: 0 14px 16px; padding: 22px 20px; }
    .mkt-discovery { padding: 0 14px; }
    .mkt-hero { padding: 34px 18px 24px; }
    .mkt-collections-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .tienda-online-head { margin: 0 14px 14px; padding: 20px 16px; }
    .mkt-discovery { padding: 0 14px; }
    .mkt-hero { border-radius: 16px; padding: 28px 15px 20px; }
    .mkt-hero-title { font-size: 36px; }
    .mkt-collections-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mkt-section-head { display: block; }
    .home-trust-strip-hero { grid-template-columns: 1fr; }
}


/* ==========================================
   MARKETPLACE — hero principal reorganizado
========================================== */
.tienda-online-head { position:relative; overflow:hidden; padding:26px 26px 0; }
.tienda-online-head::after { content:""; position:absolute; width:360px; height:360px; right:-150px; top:-210px; border-radius:50%; background:radial-gradient(circle, rgba(240,26,36,.18), transparent 68%); pointer-events:none; }
.mkt-hero { position:relative; max-width:none; margin:0 auto 12px; padding:42px 26px 22px; border:none; border-radius:18px; background:transparent; box-shadow:none; overflow:hidden; }
.mkt-hero::before { content:""; position:absolute; inset:auto auto -120px -90px; width:300px; height:240px; border-radius:50%; background:radial-gradient(circle, rgba(255,59,48,.12), transparent 70%); pointer-events:none; }
.mkt-hero-title, .mkt-hero-sub, .mkt-hero-badge, .mkt-search-wrap, .mkt-hero-cta, .mkt-stats, .mkt-hero > .mkt-section { position:relative; z-index:1; }
.mkt-hero-cta { margin:24px 0 26px; }
.mkt-hero-cta .btn-publicar, .mkt-hero-cta .btn-outline { min-width:180px; justify-content:center; }
.mkt-hero > .mkt-section { max-width:none; margin:22px 0 0; padding:18px 0 0; border-top:1px solid rgba(255,255,255,.08); text-align:left; }
.mkt-hero > .mkt-section .mkt-section-head { display:flex; align-items:end; justify-content:space-between; gap:14px; margin-bottom:12px; }
.mkt-hero > .mkt-section .mkt-section-title { font-size:18px; }
.mkt-hero > .mkt-section .mkt-section-sub { font-size:12px; }
.mkt-hero > .mkt-section .mkt-collections-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.mkt-hero > .mkt-section .mkt-collection-card { padding:14px; border-radius:12px; background:rgba(255,255,255,.03); }
.mkt-hero > .mkt-section .mkt-collection-icon { font-size:20px; }
@media (max-width: 720px) {
    .tienda-online-head { padding:18px 14px 0; }
    .mkt-hero { padding:30px 16px 18px; }
    .mkt-hero > .mkt-section .mkt-collections-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .mkt-hero > .mkt-section .mkt-section-head { align-items:flex-start; flex-direction:column; }
}

/* ==========================================
   MARKETPLACE — categorías, planes y catálogo escalable
========================================== */
.mkt-category-zone {
    margin: 0 0 28px;
    padding: 22px 22px 8px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(25,28,38,.92), rgba(13,15,22,.96));
}
.mkt-category-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 4px;
}
.mkt-section-kicker {
    margin: 0 0 6px;
    color: var(--brand2);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.mkt-section-kicker i { margin-right: 6px; }
.mkt-category-head .mkt-section-title { margin-bottom: 4px; }
.mkt-category-products { flex: 0 0 auto; min-height: 42px; }
.mkt-category-zone .mkt-stats {
    margin: 18px 0 6px;
    padding: 16px 12px;
    border-top: 1px solid rgba(255,255,255,.08);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.mkt-category-zone .mkt-quick-filters {
    margin: 0;
    padding: 16px 0 10px;
}
.mkt-chip-plan { border-color: rgba(255,216,107,.24); }
.mkt-product-heading {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 20px;
}
.mkt-product-heading > div { min-width: 0; }
.mkt-product-heading .section-title { margin-bottom: 5px; }
.mkt-product-heading .section-subtitle { margin: 0; }
.mkt-product-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 92px;
    flex: 0 0 auto;
    padding: 10px 13px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 10px;
    background: rgba(255,255,255,.035);
    color: var(--color-texto-claro);
    font-size: 12px;
    font-weight: 700;
}
.mkt-product-back:hover { border-color: var(--brand); color: #fff; }
.mkt-product-back i { color: var(--brand2); }
.mkt-plan-guide {
    margin: 0 auto 46px;
    padding: 24px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 16px;
    background: radial-gradient(circle at 85% 15%, rgba(245,31,72,.15), transparent 32%), rgba(13,15,22,.98);
}
.mkt-plan-guide-head { margin-bottom: 18px; }
.mkt-plan-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mkt-plan-card {
    padding: 18px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 13px;
    background: rgba(255,255,255,.025);
}
.mkt-plan-card-premium { border-color: rgba(255,45,100,.42); box-shadow: 0 0 24px rgba(245,31,72,.09); }
.mkt-plan-card h3 { margin: 0 0 8px; font-family: 'Syne', sans-serif; font-size: 18px; color: #fff; }
.mkt-plan-card-premium h3 { color: #ff5b8b; }
.mkt-plan-card p { margin: 0 0 10px; color: var(--muted); font-size: 12.5px; }
.mkt-plan-price { margin: 0 0 12px; color: #fff; font-size: 14px; font-weight: 800; }
.mkt-plan-card ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; color: var(--color-texto-claro); font-size: 12.5px; }
.mkt-plan-card li::before { content: '✓'; margin-right: 7px; color: var(--brand2); font-weight: 800; }
.mkt-plan-note { margin: 14px 0 0; color: var(--muted); font-size: 11.5px; }
.mkt-plan-eyebrow { display:block; margin-bottom:8px; color:var(--brand2); font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.mkt-plan-card-business { border-color:rgba(107,186,255,.35); }
.mkt-plan-card-enterprise { border-color:rgba(176,122,255,.30); }
.mkt-plan-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.mkt-plan-action { display:inline-flex; align-items:center; justify-content:center; min-height:34px; padding:8px 12px; border:1px solid rgba(255,255,255,.14); border-radius:10px; background:rgba(255,255,255,.04); color:#fff; cursor:pointer; font:inherit; font-size:11px; font-weight:800; text-decoration:none; }
.mkt-plan-action:hover { border-color:var(--brand); transform:translateY(-1px); }
.mkt-plan-action:disabled { opacity:.55; cursor:wait; transform:none; }
.mkt-plan-action-primary { border-color:rgba(255,45,100,.58); background:linear-gradient(135deg,rgba(255,20,100,.88),rgba(180,22,102,.88)); }
.mkt-plan-support-banner { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:16px; padding:14px 16px; border:1px solid rgba(255,255,255,.10); border-radius:13px; background:rgba(255,255,255,.035); }
.mkt-plan-support-banner strong,.mkt-plan-support-banner span { display:block; }
.mkt-plan-support-banner strong { color:#fff; font-size:13px; }
.mkt-plan-support-banner span,.mkt-plan-subtle { color:var(--muted); font-size:11.5px; }
.mkt-plan-whatsapp { color:#69e69a; font-size:12px; font-weight:800; text-decoration:none; white-space:nowrap; }
.mkt-pqr-modal { position:fixed; inset:0; z-index:2000; display:grid; place-items:center; padding:18px; background:rgba(0,0,0,.75); }
.mkt-pqr-modal[hidden] { display:none; }
.mkt-pqr-dialog { position:relative; width:min(520px,100%); padding:22px; border:1px solid rgba(255,45,100,.38); border-radius:17px; background:#14131e; box-shadow:0 25px 90px rgba(0,0,0,.55); }
.mkt-pqr-dialog h2 { margin:0 0 8px; color:#fff; font-family:'Syne',sans-serif; }
.mkt-pqr-dialog label { display:grid; gap:6px; margin-top:13px; color:var(--color-texto-claro); font-size:12px; font-weight:700; }
.mkt-pqr-dialog input,.mkt-pqr-dialog select,.mkt-pqr-dialog textarea { width:100%; padding:10px 11px; border:1px solid rgba(255,255,255,.13); border-radius:9px; background:rgba(255,255,255,.06); color:#fff; font:inherit; font-size:12px; }
.mkt-pqr-dialog textarea { min-height:110px; resize:vertical; }
.mkt-pqr-close { position:absolute; top:10px; right:12px; border:0; background:transparent; color:#fff; cursor:pointer; font-size:25px; }
.mkt-card-plan-line { margin-top: 5px; color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.mkt-card-badge-free { background: rgba(255,255,255,.07); color: #d9dce5; border: 1px solid rgba(255,255,255,.14); }
.mkt-card-badge-business { background: rgba(107,186,255,.14); color: #8bcaff; border: 1px solid rgba(107,186,255,.30); }
.mkt-card-badge-enterprise { background: rgba(176,122,255,.15); color: #c49bff; border: 1px solid rgba(176,122,255,.32); }
@media (max-width: 720px) {
    .mkt-category-zone { padding: 18px 15px 6px; }
    .mkt-category-head { align-items: flex-start; flex-direction: column; gap: 14px; }
    .mkt-category-products { width: 100%; }
    .mkt-product-heading { align-items: flex-start; gap: 12px; }
    .mkt-product-heading .section-title { font-size: 23px; }
    .mkt-product-back { min-width: 40px; padding: 10px; }
    .mkt-product-back span { display: none; }
    .mkt-plan-guide-grid { grid-template-columns: 1fr; }
    .mkt-plan-support-banner { align-items:flex-start; flex-direction:column; }
}

/* ==========================================================
   TICKER DE PLANES — banner de desplazamiento continuo.
   Usa las mismas variables de marca definidas en :root
   dentro de estilos.css (--brand, --brand2).
   Pegar al final de static/css/marketplace.css
   ========================================================== */
.mkt-plan-ticker {
    margin-top: 18px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(255,45,100,.08), rgba(255,255,255,.02));
    position: relative;
}
.mkt-plan-ticker::before,
.mkt-plan-ticker::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 36px;
    z-index: 2;
    pointer-events: none;
}
.mkt-plan-ticker::before { left: 0;  background: linear-gradient(90deg, var(--surface, #0d0d12), transparent); }
.mkt-plan-ticker::after  { right: 0; background: linear-gradient(270deg, var(--surface, #0d0d12), transparent); }

.mkt-plan-ticker-track {
    display: flex;
    width: max-content;
    animation: mkt-ticker-scroll 26s linear infinite;
}
.mkt-plan-ticker:hover .mkt-plan-ticker-track { animation-play-state: paused; }

.mkt-plan-ticker-group {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
}

.mkt-plan-ticker-item {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.03);
    color: #fff;
    font-size: 13px;
    padding: 8px 16px;
    border-radius: 999px;
    cursor: pointer;
    transition: border-color .2s, transform .2s;
}
.mkt-plan-ticker-item:hover { border-color: var(--brand); transform: translateY(-1px); }
.mkt-plan-ticker-item i { color: var(--brand2); }
.mkt-plan-ticker-premium i    { color: #ff5b8b; }
.mkt-plan-ticker-business i   { color: #35c2ff; }
.mkt-plan-ticker-enterprise i { color: #ffd166; }

@keyframes mkt-ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .mkt-plan-ticker-track { animation: none; }
}

.mkt-plan-ticker-social{text-decoration:none}
.mkt-plan-ticker-social i{color:#fff}

/* ---------- MEDIOS DE PAGO (Wompi) ---------- */
.mkt-pay-strip { margin-top: 14px; padding: 18px 20px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.02); }
.mkt-pay-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.mkt-pay-head h3 { margin: 0; color: #fff; font-size: 18px; }
.mkt-pay-kicker { color: #ff7fb2; text-transform: uppercase; letter-spacing: 1.1px; font-size: 10px; font-weight: 800; }
.mkt-pay-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.mkt-pay-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: rgba(255,255,255,.03); color: #fff; }
.mkt-pay-item i { font-size: 20px; color: #ff7fb2; width: 24px; text-align: center; }
.mkt-pay-item strong { display: block; font-size: 13px; }
.mkt-pay-item small { display: block; font-size: 11px; opacity: .65; margin-top: 2px; }
.mkt-pay-note { margin: 12px 0 0; font-size: 11.5px; opacity: .6; color: #fff; }