/* =========================================================
   FARMAVITAE MARKET — hoja de estilos exclusiva del marketplace
   Reutiliza las variables y componentes de estilos.css
   (--brand, --accent, --font, .card, .tab, .badge, .oculto, etc.)
   No redefine ni sobrescribe ninguna clase de estilos.css.

   v2 — pase de diseño "premium": fondos con degradados suaves,
   glassmorphism en tarjetas clave, brillos de marca en hover y
   más profundidad en sombras. Todos los selectores originales
   se mantienen intactos para no romper mercado.js / tienda.js.
   ========================================================= */

.cuerpo-mercado {
    position: relative;
    min-height: 100vh;
    background:
        radial-gradient(1200px circle at 6% -10%, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 55%),
        radial-gradient(1000px circle at 98% 4%, color-mix(in srgb, var(--brand) 14%, transparent) 0%, transparent 52%),
        radial-gradient(800px circle at 50% 45%, color-mix(in srgb, var(--accent) 6%, transparent) 0%, transparent 62%),
        radial-gradient(900px circle at 8% 92%, color-mix(in srgb, var(--brand-mid, var(--brand)) 10%, transparent) 0%, transparent 58%),
        radial-gradient(700px circle at 100% 100%, color-mix(in srgb, var(--accent) 9%, transparent) 0%, transparent 55%),
        linear-gradient(175deg, var(--surface) 0%, color-mix(in srgb, var(--accent) 3%, var(--surface)) 50%, var(--surface) 100%);
    background-attachment: fixed;
}
.cuerpo-mercado::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
    .cuerpo-mercado *, .cuerpo-mercado *::before, .cuerpo-mercado *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

/* ============ BARRA DE CONFIANZA SUPERIOR ============ */
/* Se había perdido en una edición anterior — la repongo completa. */
.barra-confianza {
    background: var(--brand-dark);
    color: rgba(255,255,255,.88);
}
/* Etiqueta corta de la franja de confianza — solo en celular (ver
   media query). En escritorio se muestra la versión larga. */
.barra-confianza-corto { display: none; }
.barra-confianza-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 7px var(--space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    font-size: 12px;
}
.barra-confianza-lista {
    display: flex;
    gap: var(--space-5);
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}
.barra-confianza-lista li { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.barra-confianza-lista .ini-ico { width: 14px; height: 14px; }
.barra-confianza-ayuda {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.barra-confianza-ayuda:hover { text-decoration: underline; }
@media (max-width: 720px) { .barra-confianza-ayuda { display: none; } }

/* ============ NAV DEL SITIO ============ */
.nav-sitio {
    background: var(--white);
    box-shadow: var(--shadow-sm);
    border-bottom: 1px solid color-mix(in srgb, var(--brand) 8%, transparent);
    position: sticky;
    top: 0;
    /* El carrito-drawer ya NO vive dentro del navbar (farmavitae-carrito.js
       lo mueve a document.body al iniciar), así que el navbar puede volver
       a un z-index bajo — de hecho DEBE ser menor al del panel (1000) y al
       del fondo oscuro (999), o si no el navbar tapa el encabezado
       "Tu carrito" cuando el drawer está abierto. */
    z-index: 40;
}
.nav-sitio-inner {
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--space-3) var(--space-6);
}
.logo-sitio {
    display: flex;
    align-items: center;
    text-decoration: none;
}
.logo-sitio img { height: 48px; width: auto; display: block; }
.nav-sitio-links {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex-wrap: wrap;
}
.nav-sitio-links a {
    color: var(--ink-light);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color .2s ease;
}
.nav-sitio-links a:hover { color: var(--brand); }
.nav-sitio-links a.activa { color: var(--brand); border-bottom: 2px solid var(--brand-mid); padding-bottom: 4px; }
.pill-nuevo {
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--brand)));
    color: var(--brand-dark);
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: var(--r-full);
    text-transform: uppercase;
    letter-spacing: .03em;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 45%, transparent);
}
.nav-sitio-iconos { display: flex; gap: var(--space-3); font-size: var(--text-md); align-items: center; }

/* "Quiero vender" dentro del encabezado — solo en celular, oculto en
   escritorio (ahí el botón del hero grande ya tiene buena presencia).
   Va justo después del logo, compacto. */
.nav-quiero-vender { display: none; }

/* ============ MENÚ MÓVIL ============ */
.btn-menu-movil {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px; height: 40px;
    border: none;
    background: var(--surface-2);
    border-radius: var(--r-md);
    cursor: pointer;
    padding: 0;
    order: 3;
    transition: var(--ease);
}
.btn-menu-movil:hover { background: var(--surface-3); }
.btn-menu-movil span { display: block; width: 16px; margin: 0 auto; height: 2px; background: var(--ink); border-radius: var(--r-full); transition: var(--ease); }
.btn-menu-movil[aria-expanded="true"] { background: var(--brand); }
.btn-menu-movil[aria-expanded="true"] span { background: var(--white); }
.btn-menu-movil[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.btn-menu-movil[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.btn-menu-movil[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
    .nav-sitio-inner { flex-wrap: wrap; }
    .btn-menu-movil { display: flex; }
    /* Agrupa el menú hamburguesa y el carrito juntos, pegados al borde
       derecho — antes, con justify-content:space-between y 3 elementos
       sueltos (logo / hamburguesa / carrito), el carrito quedaba flotando
       en el medio en vez de ir junto al menú. */
    .btn-menu-movil { order: 2; margin-left: auto; }
    .nav-sitio-iconos { order: 3; }
    .nav-quiero-vender {
        display: flex;
        align-items: center;
        gap: 4px;
        order: 4;
        padding: 7px 12px;
        border-radius: var(--r-full);
        background: linear-gradient(135deg, var(--brand) 0%, var(--brand-mid) 100%);
        color: var(--white);
        text-decoration: none;
        font-family: var(--font);
        font-weight: 700;
        font-size: 12px;
        white-space: nowrap;
        box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--brand) 55%, transparent);
    }
    .nav-sitio-links {
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
        order: 4;
        border-top: 1px solid color-mix(in srgb, var(--brand) 8%, transparent);
        margin-top: var(--space-3);
        padding-top: var(--space-2);
    }
    .nav-sitio-links.abierto { display: flex; }
    .nav-sitio-links a { padding: 12px 4px; border-bottom: 1px solid color-mix(in srgb, var(--brand) 5%, transparent); font-size: var(--text-base); }
}

/* ============ CARRITO ============ */
.nav-carrito-wrap { position: relative; display: flex; align-items: center; }
.btn-nav-carrito {
    position: relative;
    background: var(--surface-2);
    border: none;
    width: 40px; height: 40px;
    flex-shrink: 0;
    border-radius: var(--r-md);
    font-size: var(--text-md);
    cursor: pointer;
    padding: 0;
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--ease);
}
.btn-nav-carrito:hover { background: var(--surface-3); transform: translateY(-1px); }
.btn-nav-carrito .ini-ico { width: 19px; height: 19px; }
.badge-carrito {
    position: absolute;
    top: -6px;
    right: -6px;
    background: linear-gradient(135deg, var(--brand), var(--brand-mid));
    color: var(--white);
    font-size: 10px;
    font-weight: 800;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-full);
    padding: 0 4px;
    border: 2px solid var(--white);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--brand) 45%, transparent);
}
.panel-carrito {
    position: absolute;
    top: calc(100% + 16px);
    right: -10px;
    width: 320px;
    max-width: 88vw;
    background: color-mix(in srgb, var(--white) 97%, transparent);
    backdrop-filter: blur(10px);
    border: 1px solid color-mix(in srgb, var(--brand) 8%, transparent);
    border-radius: var(--r-md);
    box-shadow: 0 24px 48px -18px color-mix(in srgb, var(--ink) 30%, transparent), var(--shadow-lg);
    padding: var(--space-4);
    z-index: 50;
    opacity: 1;
    font-size: var(--text-sm);
}
.panel-carrito-header { margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid color-mix(in srgb, var(--brand) 8%, transparent); }
.panel-carrito-header-fila1 { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: 6px; }
.panel-carrito-header h4 { margin: 0; font-family: var(--font-display); font-size: var(--text-md); color: var(--ink); }
.panel-carrito-header-fila2 { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.panel-carrito-header-total { font-size: var(--text-sm); color: var(--ink-muted); }
.panel-carrito-header-total-valor { color: var(--brand); font-weight: 800; font-family: var(--font-display); }
.panel-carrito-vaciar { font-size: var(--text-xs); color: var(--ink-muted); text-decoration: underline; }
.panel-carrito-vaciar:hover { color: var(--error); }
.panel-carrito-cerrar {
    border: none;
    background: var(--surface-2);
    color: var(--ink-muted);
    width: 32px; height: 32px;
    border-radius: 50%;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: var(--ease);
}
.panel-carrito-cerrar:hover { background: var(--surface-3); color: var(--ink); }
.panel-carrito-cuerpo { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-3); }
.panel-carrito-vacio { color: var(--ink-muted); font-size: var(--text-sm); text-align: center; padding: var(--space-5) 0; margin: 0; }
.panel-carrito-item { display: grid; grid-template-columns: 44px 1fr auto auto; gap: var(--space-2); align-items: center; }
.panel-carrito-item-regalo {
    grid-template-columns: 44px 1fr auto;
    background: color-mix(in srgb, var(--brand) 4%, transparent);
    border-radius: var(--r-sm);
    padding: 6px 8px;
    margin: 2px 0;
}
.panel-carrito-item-regalo .panel-carrito-item-precio { color: var(--brand); font-weight: 700; font-size: 12.5px; }
.panel-carrito-item img { width: 44px; height: 44px; object-fit: cover; border-radius: var(--r-sm); background: var(--surface-2); }
.panel-carrito-item-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.panel-carrito-item-nombre { font-size: var(--text-xs); font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-carrito-item-tienda { font-size: 10px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-carrito-item-etiquetas { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.panel-carrito-item-promo,
.panel-carrito-item-envio-gratis,
.panel-carrito-item-2x1,
.panel-carrito-item-mayorista {
    display: inline-flex;
    align-items: center;
    font-size: 9px;
    font-weight: 700;
    border-radius: var(--r-full);
    padding: 1px 6px;
    line-height: 1.5;
    white-space: nowrap;
}
.panel-carrito-item-promo { color: var(--error); background: color-mix(in srgb, var(--error) 9%, transparent); }
.panel-carrito-item-envio-gratis { color: var(--success); background: color-mix(in srgb, var(--success) 9%, transparent); }
.panel-carrito-item-envio-gratis-pendiente { color: var(--ink-muted); background: color-mix(in srgb, var(--ink-muted) 8%, transparent); }
.panel-carrito-item-2x1 { color: var(--brand); background: color-mix(in srgb, var(--brand) 9%, transparent); }
.panel-carrito-item-mayorista { color: #0f9a7a; background: color-mix(in srgb, #0f9a7a 10%, transparent); }
.panel-carrito-regalo-bienvenida {
    margin: var(--space-3) 0;
    padding: var(--space-3);
    border-radius: var(--r-md);
    background: color-mix(in srgb, var(--brand) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand) 16%, transparent);
}
.panel-carrito-regalo-bienvenida-titulo { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--ink); }
.panel-carrito-regalo-bienvenida-texto { margin: 0; font-size: 12.5px; color: var(--ink-light); line-height: 1.4; }
.panel-carrito-regalo-bienvenida-opciones {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
    /* Con muchas opciones configuradas (10+), la lista no crece sin
       límite — se limita a ~4 opciones visibles y el resto queda
       accesible con scroll adentro de su propia caja. */
    max-height: 220px;
    overflow-y: auto;
    padding-right: 2px;
}
.panel-carrito-regalo-bienvenida-opciones::-webkit-scrollbar { width: 5px; }
.panel-carrito-regalo-bienvenida-opciones::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--brand) 30%, transparent); border-radius: var(--r-full); }
.panel-carrito-regalo-bienvenida-opcion {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    border-radius: var(--r-sm);
    border: 1.5px solid var(--surface-3);
    background: var(--white);
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: var(--ink);
}
.panel-carrito-regalo-bienvenida-opcion.activa { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, transparent); }
.panel-carrito-regalo-bienvenida-opcion img { width: 28px; height: 28px; object-fit: contain; border-radius: 6px; background: var(--surface-2); flex-shrink: 0; }
.panel-carrito-regalo-bienvenida-opcion span:not(.panel-carrito-regalo-bienvenida-check) { flex: 1; font-size: 12.5px; font-weight: 600; }
.panel-carrito-regalo-bienvenida-check { font-size: 10.5px; font-weight: 700; color: var(--brand); }
.panel-carrito-regalo-bienvenida-nota { margin: 6px 0 0; font-size: 11px; color: var(--ink-muted); }
.panel-carrito-item-2x1-aviso,
.panel-carrito-item-mayorista-aviso {
    display: block;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--brand);
    margin-top: 3px;
    line-height: 1.4;
}
.panel-carrito-item-mayorista-aviso { color: #0f9a7a; }
.panel-carrito-item-cruzada-generador {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--brand);
    margin-top: 5px;
    line-height: 1.4;
}
.panel-carrito-item-cruzada-generador img {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid var(--ink-subtle);
    flex-shrink: 0;
}
.panel-carrito-item-cruzada-generador span { text-decoration: underline; }
.panel-carrito-item-precio-antes {
    display: block;
    font-size: 10.5px;
    font-weight: 400;
    color: var(--ink-muted);
    text-decoration: line-through;
}
.panel-carrito-item-cantidad { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.panel-carrito-item-cantidad button {
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 1px solid var(--ink-subtle);
    background: var(--white);
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color .2s ease, color .2s ease;
}
.panel-carrito-item-cantidad span {
    min-width: 16px;
    text-align: center;
    font-size: var(--text-xs);
    font-weight: 700;
}
.panel-carrito-item-cantidad button:hover { border-color: var(--brand-mid); color: var(--brand); }
.panel-carrito-item-precio { font-size: var(--text-xs); font-weight: 700; color: var(--brand); white-space: nowrap; }
.panel-carrito-item-quitar { background: none; border: none; color: var(--ink-muted); cursor: pointer; font-size: 12px; padding: 0; }
.panel-carrito-item-quitar:hover { color: var(--error); }
.panel-carrito-pie { border-top: 1px solid var(--surface-3); margin-top: var(--space-3); padding-top: var(--space-3); }
.panel-carrito-total-fila { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--text-sm); margin-bottom: var(--space-2); }
.panel-carrito-total-fila strong { font-family: var(--font-display); color: var(--brand-dark); font-size: var(--text-base); }
.panel-carrito-nota { font-size: 10px; color: var(--ink-muted); line-height: 1.5; margin: 0; }

/* Checkout unificado: mismo pedido por WhatsApp del sitio real,
   ahora también puede incluir productos del Marketplace. */
.panel-carrito-checkout { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-2); }
.panel-carrito-seccion input,
.panel-carrito-checkout input {
    width: 100%;
    padding: 8px 10px;
    margin-bottom: 8px;
    border: 1px solid var(--surface-3);
    border-radius: var(--r-sm);
    font-size: var(--text-xs);
    font-family: inherit;
    background: var(--surface-1);
    color: var(--ink);
    transition: box-shadow .2s ease, border-color .2s ease;
    box-sizing: border-box;
}
.panel-carrito-seccion input:focus,
.panel-carrito-checkout input:focus { outline: none; border-color: var(--brand-mid); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); }
.panel-carrito-seccion input.panel-carrito-input-error { border-color: var(--error); }
.panel-carrito-checkout .panel-carrito-enviar { width: 100%; justify-content: center; margin-top: 2px; }

/* ---- Envío gratis / cupón (mismas reglas que el sitio real: ver
   farmavitae-carrito.js) ---- */
.panel-carrito-envio-msg {
    font-size: var(--text-xs);
    color: var(--ink-light);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    border-radius: var(--r-sm);
    padding: 8px 10px;
    margin: 0 0 var(--space-3);
}
.panel-carrito-cupon { margin-bottom: var(--space-3); }
.panel-carrito-cupon-fila { display: flex; gap: 6px; }
.panel-carrito-cupon-input {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--surface-3);
    border-radius: var(--r-sm);
    font-size: var(--text-xs);
    font-family: inherit;
    background: var(--surface-1);
    color: var(--ink);
}
.panel-carrito-cupon-input:focus { outline: none; border-color: var(--brand-mid); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); }
.panel-carrito-cupon-aplicar {
    flex-shrink: 0;
    border: 1.5px solid var(--brand-mid);
    background: none;
    color: var(--brand);
    border-radius: var(--r-sm);
    padding: 8px 14px;
    font-size: var(--text-xs);
    font-weight: 700;
    cursor: pointer;
    transition: var(--ease);
}
.panel-carrito-cupon-aplicar:hover { background: var(--brand); color: var(--white); }
.panel-carrito-cupon-mensaje { font-size: 11px; margin: 6px 0 0; min-height: 1.2em; }
.panel-carrito-cupon-mensaje.panel-carrito-cupon-error { color: var(--error); }
.panel-carrito-cupon-mensaje.panel-carrito-cupon-ok { color: #0f9a7a; }
.panel-carrito-descuento-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: var(--text-xs);
    color: #0f9a7a;
    margin-bottom: var(--space-2);
}
.panel-carrito-descuento-fila .panel-carrito-cupon-codigo { font-weight: 700; text-transform: uppercase; }
.panel-carrito-cupon-quitar { background: none; border: none; color: var(--ink-muted); cursor: pointer; font-size: 11px; padding: 0; }
.panel-carrito-cupon-quitar:hover { color: var(--error); }
.panel-carrito-total-final-fila { border-top: 1px dashed var(--surface-3); padding-top: var(--space-2); }

.panel-carrito-envio { margin-bottom: var(--space-3); }
.panel-carrito-envio label { display: block; font-size: 11px; color: var(--ink-muted); font-weight: 600; margin-bottom: 4px; }
.panel-carrito-envio-select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--surface-3);
    border-radius: var(--r-sm);
    font-size: var(--text-xs);
    font-family: inherit;
    background: var(--surface-1);
    color: var(--ink);
}
.panel-carrito-envio-select:focus { outline: none; border-color: var(--brand-mid); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); }
.panel-carrito-envio-costo-fila { font-size: var(--text-xs); color: var(--ink-light); }

/* Selector de transportista — mismo aspecto que el de "Método de
   entrega" (comparten .panel-carrito-envio label ya arriba), solo
   aparece cuando hay 2+ transportistas activos (ver mercado.js). */
.panel-carrito-transportista { margin-bottom: var(--space-3); }
.panel-carrito-transportista-select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--surface-3);
    border-radius: var(--r-sm);
    font-size: var(--text-xs);
    font-family: inherit;
    background: var(--surface-1);
    color: var(--ink);
}
.panel-carrito-transportista-select:focus { outline: none; border-color: var(--brand-mid); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); }

/* Selector de punto de retiro — mismo aspecto que el de transportista,
   solo aparece cuando hay 2+ puntos de retiro activos (ver mercado.js). */
.panel-carrito-punto-retiro { margin-top: 10px; margin-bottom: var(--space-3); }
.panel-carrito-punto-retiro-select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--surface-3);
    border-radius: var(--r-sm);
    font-size: var(--text-xs);
    font-family: inherit;
    background: var(--surface-1);
    color: var(--ink);
}
.panel-carrito-punto-retiro-select:focus { outline: none; border-color: var(--brand-mid); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); }
.panel-carrito-punto-retiro-direccion { margin: 6px 0 0; font-size: 12px; color: var(--ink-muted); }

.panel-carrito-pago { margin-bottom: var(--space-3); }
.panel-carrito-pago label { display: block; font-size: 11px; color: var(--ink-muted); font-weight: 600; margin-bottom: 4px; }
.panel-carrito-metodo-pago {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--surface-3);
    border-radius: var(--r-sm);
    font-size: var(--text-xs);
    font-family: inherit;
    background: var(--surface-1);
    color: var(--ink);
}
.panel-carrito-metodo-pago:focus { outline: none; border-color: var(--brand-mid); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); }
.panel-carrito-pago-info {
    margin-top: 8px;
    padding: 10px;
    background: var(--surface-2);
    border-radius: var(--r-sm);
    font-size: 11px;
    color: var(--ink-light);
}
.panel-carrito-pago-info p { margin: 0 0 6px; }
.panel-carrito-pago-info p:last-child { margin-bottom: 0; }

.panel-carrito-comprobante-campo { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--surface-3); }
.panel-carrito-comprobante-campo label { display: block; font-size: var(--text-xs); font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.panel-carrito-comprobante-campo input[type="file"] { width: 100%; font-size: 12px; }
.panel-carrito-comprobante-nombre { display: block; margin-top: 6px; font-size: 12px; color: #0f9a7a; font-weight: 600; }
.panel-carrito-asesor-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--surface-3);
    font-size: 12px;
    color: var(--ink-light);
    cursor: pointer;
}
.panel-carrito-asesor-check input { margin-top: 2px; flex-shrink: 0; }
.panel-carrito-pago-info ul { margin: 0 0 6px; padding-left: 16px; }
.panel-carrito-pago-info li { margin-bottom: 2px; }
.panel-carrito-pago-aviso { background: rgba(192,57,43,.08); color: var(--error); font-weight: 600; }
.panel-carrito-cod-fila { font-size: var(--text-xs); color: var(--ink-light); }
.panel-carrito-resto-cod-fila { font-size: var(--text-xs); color: var(--ink-muted); }

.panel-carrito-seccion { margin-bottom: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--surface-3); }
.panel-carrito-seccion:first-child { border-top: none; padding-top: 0; }
.panel-carrito-seccion-titulo { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-muted); font-weight: 700; margin: 0 0 8px; }
.panel-carrito-seccion label { display: block; font-size: 11px; color: var(--ink-muted); font-weight: 600; margin: 8px 0 4px; }
.panel-carrito-seccion select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--surface-3);
    border-radius: var(--r-sm);
    font-size: var(--text-xs);
    font-family: inherit;
    background: var(--surface-1);
    color: var(--ink);
}
.panel-carrito-seccion select:focus { outline: none; border-color: var(--brand-mid); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); }
.panel-carrito-campo-error { font-size: 11px; color: var(--error); margin: 4px 0 0; min-height: 1em; }
#carrito-direccion-entrega-extra, #carrito-datos-receptor { margin-top: 8px; }

.panel-carrito-progreso {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-muted);
    letter-spacing: .01em;
    margin: 0 0 var(--space-4);
}
.panel-carrito-progreso span { margin: 0 3px; color: var(--surface-3); }

.panel-carrito-paso-acciones { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-4); }
.panel-carrito-paso-acciones .btn-mkt-primary { flex: 1; text-align: center; }
.panel-carrito-vaciar-paso { background: none; border: none; color: var(--ink-muted); font-size: var(--text-xs); cursor: pointer; white-space: nowrap; padding: 0; }
.panel-carrito-vaciar-paso:hover { color: var(--error); }

.panel-carrito-volver {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: var(--brand);
    font-weight: 700;
    font-size: var(--text-xs);
    cursor: pointer;
    padding: 0;
    margin-bottom: var(--space-4);
}
.panel-carrito-volver:hover { text-decoration: underline; }

#carrito-paso-2 .panel-carrito-continuar-2,
#carrito-paso-3 .panel-carrito-enviar { width: 100%; text-align: center; margin-top: var(--space-3); }

.mercado-main {
    max-width: 1240px;
    margin: 0 auto;
    padding: var(--space-6);
    position: relative;
    z-index: 1;
}

/* Franja compacta de "Quiero vender" — solo aparece en celular (ver
   media query más abajo). En escritorio el botón ya tiene buena
   presencia dentro del hero grande, así que esta franja se oculta ahí
   para no repetir el mismo llamado dos veces. */
.franja-quiero-vender { display: none; }

.hero-mercado-wrap {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-lg);
    margin-bottom: var(--space-2);
    border: 1px solid color-mix(in srgb, var(--brand) 7%, transparent);
    box-shadow: 0 40px 70px -40px color-mix(in srgb, var(--brand) 25%, transparent);
    background:
        linear-gradient(175deg, color-mix(in srgb, var(--brand) 5%, var(--white)) 0%, color-mix(in srgb, var(--white) 100%, transparent) 60%);
}
.hero-mercado-wrap::before,
.hero-mercado-wrap::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    z-index: 0;
    pointer-events: none;
}
.hero-mercado-wrap::before {
    width: 380px; height: 380px;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%);
    top: -160px; right: -90px;
}
.hero-mercado-wrap::after {
    width: 320px; height: 320px;
    background: radial-gradient(circle, color-mix(in srgb, var(--brand) 30%, transparent), transparent 70%);
    bottom: -140px; left: -70px;
}
.hero-mercado-wrap > * { position: relative; z-index: 1; }

/* Textura de puntos, confinada al hero para no saturar el resto de la página */
.hero-mercado { position: relative; }
/* Oculto por defecto (escritorio) — solo se muestra dentro del
   @media de celular, donde reemplaza al hero institucional. */
.hero-banner-oferta-movil { display: none; }
.hero-mercado::before {
    content: '';
    position: absolute;
    inset: -40px;
    background-image: radial-gradient(color-mix(in srgb, var(--brand) 14%, transparent) 1.5px, transparent 1.5px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(circle at 25% 35%, black, transparent 65%);
    mask-image: radial-gradient(circle at 25% 35%, black, transparent 65%);
    pointer-events: none;
    z-index: 0;
}
.hero-mercado > * { position: relative; z-index: 1; }

/* ============ BOTONES DEL MARKETPLACE (no tocan .btn-primary) ============ */
.btn-mkt-primary, .btn-mkt-secundario {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--r-full);
    font-family: var(--font);
    font-weight: 600;
    font-size: var(--text-sm);
    text-decoration: none;
    cursor: pointer;
    transition: var(--ease);
    border: none;
}
.btn-mkt-primary {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-mid) 100%);
    color: var(--white);
    box-shadow: 0 10px 22px -6px color-mix(in srgb, var(--brand) 55%, transparent), inset 0 1px 0 rgba(255,255,255,.2);
}
.btn-mkt-primary:hover { filter: brightness(1.05); transform: translateY(-2px); box-shadow: 0 14px 28px -6px color-mix(in srgb, var(--brand) 60%, transparent), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-mkt-secundario {
    background: color-mix(in srgb, var(--white) 92%, transparent);
    color: var(--brand);
    border: 1.5px solid var(--brand);
    backdrop-filter: blur(6px);
}
.btn-mkt-secundario:hover { background: color-mix(in srgb, var(--brand) 6%, var(--white)); transform: translateY(-1px); }
.btn-mkt-link {
    background: none;
    border: none;
    color: var(--brand);
    font-weight: 600;
    font-size: var(--text-sm);
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}
.btn-mkt-link:hover { color: var(--brand-mid); }

/* ============ HERO ============ */
.hero-mercado {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: var(--space-7);
    align-items: center;
    padding: var(--space-7);
}
@media (max-width: 860px) { .hero-mercado { grid-template-columns: 1fr; padding: var(--space-6); } }

.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    font-weight: 700;
    color: #0f7a7a;
    background: var(--accent-dim, #E6F7F7);
    padding: 5px 12px;
    border-radius: var(--r-full);
    margin-bottom: var(--space-4);
}
.hero-mercado h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, var(--text-3xl, 3rem));
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.01em;
    margin: 0 0 var(--space-4);
    color: var(--ink);
}
.hero-mercado h1 span {
    background: linear-gradient(135deg, var(--accent), var(--brand-mid));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero-sub {
    color: var(--ink-muted);
    font-size: var(--text-md);
    line-height: 1.6;
    max-width: 46ch;
    margin: 0 0 var(--space-6);
}
.hero-acciones { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.hero-mercado-stats {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    background: linear-gradient(175deg, color-mix(in srgb, var(--white) 95%, transparent) 0%, color-mix(in srgb, var(--white) 82%, transparent) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid color-mix(in srgb, var(--brand) 10%, transparent);
    border-radius: var(--r-lg);
    padding: var(--space-5);
    box-shadow: 0 26px 50px -20px color-mix(in srgb, var(--brand) 30%, transparent), var(--shadow-lg);
}
.stat-card { display: flex; align-items: center; gap: var(--space-3); }
.stat-ico {
    font-size: 20px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-md);
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, var(--white)), color-mix(in srgb, var(--brand) 14%, var(--white)));
    flex-shrink: 0;
    box-shadow: 0 4px 10px color-mix(in srgb, var(--brand) 16%, transparent);
}
.stat-card div { display: flex; flex-direction: column; }
.stat-card strong { font-family: var(--font-display); font-size: var(--text-lg); color: var(--ink); line-height: 1.2; }
.stat-card span { font-size: var(--text-xs); color: var(--ink-muted); }

/* ============ EXPLORA POR CATEGORÍA ============ */
/* Título + acción ("Ver todas...") en la misma fila — el flex va
   DIRECTO en <summary> (no en <details>): poner display:flex en
   <details> resultó frágil, dejaba el contenido de abajo (la grilla
   de categorías/tiendas) roto, mostrándose en una sola columna
   vertical en vez de su grid normal. Con el flex solo en summary,
   el resto del contenido queda fuera de ese contexto flex y se
   comporta como bloque normal, sin trucos. */
.mkt-colapsable-summary-con-accion {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    margin-bottom: var(--space-4);
}
.mkt-colapsable-summary-con-accion h2 { margin: 0; }
/* pointer-events:none (desactiva el toggle en web) se hereda del
   <summary> — el link de acción necesita su propio pointer-events:auto
   para seguir siendo clicable ahí. */
@media (min-width: 641px) {
    .mkt-colapsable-summary-con-accion .btn-mkt-link { pointer-events: auto; }
}

.seccion-categorias-hero { margin-bottom: var(--space-5); }
/* En escritorio, SOLO en Marketplace (mercado.html) — ahí el panel de
   Filtros (fijo al costado) ya tiene su propia lista de Categorías,
   así que esta fila quedaba repitiendo lo mismo dos veces. En Inicio y
   Distribución esta misma sección sigue igual: son la única forma de
   navegar por categoría ahí, no tienen un panel de filtros con
   categorías propio. En celular se mantiene en las 3 páginas, ya que
   ahí el panel de filtros está oculto por defecto. */
@media (min-width: 641px) {
    #seccion-categorias-hero-mkt { display: none; }
}
.seccion-categorias-hero h2 { margin: 0 0 var(--space-4); }
.fila-categorias-hero {
    display: flex;
    gap: var(--space-3);
    overflow-x: auto;
    padding: 2px 2px 6px;
    scrollbar-width: thin;
}
@media (max-width: 640px) {
    .fila-categorias-hero { gap: var(--space-4); }
}
/* Categorías estilo "historias" — círculo con anillo degradado y el
   ícono adentro, nombre debajo — más ligero visualmente que las
   tarjetas rectangulares, y reconocible al toque en celular. */
.categoria-story-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    width: 56px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--font);
    color: var(--ink);
    text-decoration: none;
}
.categoria-story-aro {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent) 0%, var(--brand-mid) 100%);
    padding: 2.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--ease);
}
.categoria-story-ico {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}
.categoria-story-item:hover .categoria-story-aro { transform: scale(1.06); }
.categoria-story-nombre { font-size: 11.5px; font-weight: 700; text-align: center; line-height: 1.25; }
.categoria-story-aro-ver-todas {
    background: var(--surface-2);
    border: 2px dashed color-mix(in srgb, var(--brand) 30%, transparent);
}
.categoria-story-aro-ver-todas .categoria-story-ico { background: transparent; color: var(--brand); font-weight: 800; }
/* Estado "activa" — Distribución filtra en la misma pantalla (a
   diferencia del Marketplace, que navega a otra vista), así que necesita
   marcar cuál categoría está elegida ahora mismo. */
.categoria-story-item-activa .categoria-story-aro { box-shadow: 0 0 0 2px var(--brand); }
.categoria-story-item-activa .categoria-story-nombre { color: var(--brand); font-weight: 800; }
@media (max-width: 640px) {
    .categoria-story-item { width: 64px; }
    .categoria-story-aro { width: 56px; height: 56px; }
    .categoria-story-ico { font-size: 22px; }
}

/* Grid de categorías de Distribución — sigue siendo el estilo de
   tarjeta rectangular (ícono + nombre + cantidad), separado del nuevo
   estilo circular de Marketplace. */
.fila-categorias-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 160px));
    justify-content: start;
    gap: var(--space-3);
    max-width: 760px;
}
@media (max-width: 640px) {
    .fila-categorias-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: var(--space-2);
        -webkit-overflow-scrolling: touch;
    }
    .fila-categorias-grid .categoria-hero-item { flex: 0 0 145px; scroll-snap-align: start; }
}
.categoria-hero-item {
    display: grid;
    grid-template-columns: 32px 1fr;
    align-items: center;
    column-gap: 10px;
    background: color-mix(in srgb, var(--white) 96%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand) 7%, transparent);
    border-radius: var(--r-md);
    padding: 10px 14px;
    cursor: pointer;
    font-family: var(--font);
    font-size: var(--text-xs);
    font-weight: 700;
    text-decoration: none;
    color: var(--ink);
    transition: var(--ease);
    box-shadow: 0 2px 8px rgba(0,0,0,.03);
}
/* El ícono ocupa las 2 filas (columna 1); el nombre (2do hijo, sin
   clase propia) y la cantidad de productos se apilan en la columna 2. */
.categoria-hero-item > .categoria-hero-ico { grid-row: 1 / 3; }
.categoria-hero-item > span:not(.categoria-hero-ico):not(.categoria-hero-cantidad) { grid-column: 2; align-self: end; }
.categoria-hero-cantidad { grid-column: 2; align-self: start; }
.categoria-hero-item:hover {
    text-decoration: none;
    transform: translateY(-4px);
    box-shadow: 0 20px 34px -16px color-mix(in srgb, var(--brand) 35%, transparent);
    border-color: color-mix(in srgb, var(--brand-mid) 40%, transparent);
}
.categoria-hero-ico {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 24%, var(--white)), color-mix(in srgb, var(--brand) 14%, var(--white)));
    box-shadow: inset 0 1px 2px rgba(255,255,255,.6), 0 3px 8px -3px color-mix(in srgb, var(--brand) 40%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
    transition: transform .25s ease, background .25s ease;
}
.categoria-hero-item:hover .categoria-hero-ico { transform: scale(1.1) rotate(-4deg); background: linear-gradient(135deg, var(--accent), var(--brand)); }
/* white-space:nowrap evita que "N productos" se parta en 2 líneas: sin
   esto, el ancho de la columna (grid 1fr) se calculaba a veces por el
   ancho del nombre de la categoría (si es corto, como "Mascotas"), que
   puede terminar siendo menor al de "productos" solo — partiendo el
   texto en "N" arriba y "productos" abajo. */
.categoria-hero-cantidad { font-size: 11px; color: var(--ink-muted); font-weight: 500; white-space: nowrap; }
/* Estado activo — usado en Distribución (chips de "Todas" / categoría
   elegida), donde a diferencia del Marketplace sí hace falta marcar
   cuál está seleccionada (acá no hay un catálogo con sidebar aparte
   que ya lo refleje). */
.categoria-hero-item-activa {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-mid) 100%);
    border-color: transparent;
    color: var(--white);
}
.categoria-hero-item-activa .categoria-hero-cantidad { color: rgba(255,255,255,.8); }

/* ============ TIENDAS DESTACADAS ============ */
/* Vitrina de cupones disponibles — tarjetas clicables, en fila con
   scroll horizontal (mismo patrón que tiendas destacadas). Banda con
   degradado de marca de fondo + encabezado más vistoso, para que se
   note de un vistazo que es una zona promocional — antes era un <h2>
   chico casi igual a cualquier otro título de sección, se perdía
   entre el resto de la página. */
.seccion-cupones-vitrina {
    margin-bottom: var(--space-5);
    background: linear-gradient(120deg, color-mix(in srgb, var(--brand) 9%, var(--white)) 0%, color-mix(in srgb, var(--accent) 12%, var(--white)) 100%);
    border: 1px solid color-mix(in srgb, var(--brand) 14%, transparent);
    border-radius: var(--r-lg);
    padding: var(--space-4) var(--space-4) var(--space-3);
}
.seccion-cupones-vitrina h2 {
    margin: 0 0 4px;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cupones-vitrina-sub {
    margin: 0 0 var(--space-3);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--brand);
    background: color-mix(in srgb, var(--white) 65%, transparent);
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--r-full);
}
.fila-cupones-vitrina {
    display: flex;
    gap: var(--space-3);
    overflow-x: auto;
    padding: 2px 2px 6px;
    -webkit-overflow-scrolling: touch;
    /* Ya se podía deslizar, pero sin ninguna pista visual de que hay
       más cupones a la derecha — con muchos cupones, se veía como si
       la fila simplemente se cortara. */
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%);
}
.cupon-vitrina-card {
    flex: 0 0 218px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
    text-align: left;
    position: relative;
    background: var(--white);
    border: none;
    border-radius: var(--r-md);
    padding: 12px 14px 12px 12px;
    cursor: pointer;
    font-family: var(--font);
    transition: var(--ease);
    box-shadow: 0 4px 14px -8px rgba(0,40,90,.12);
    /* Efecto "boleto" — muescas circulares recortadas a los lados,
       como un cupón físico perforado, en vez del borde punteado
       genérico de antes. */
    -webkit-mask-image:
        radial-gradient(circle 7px at 0 50%, transparent 7px, #000 7.5px),
        radial-gradient(circle 7px at 100% 50%, transparent 7px, #000 7.5px);
    -webkit-mask-composite: source-in;
    mask-image:
        radial-gradient(circle 7px at 0 50%, transparent 7px, #000 7.5px),
        radial-gradient(circle 7px at 100% 50%, transparent 7px, #000 7.5px);
    mask-composite: intersect;
}
.cupon-vitrina-card::after {
    /* Línea punteada vertical separando el logo/código del resto —
       remata el efecto de "boleto para cortar". */
    content: "";
    position: absolute;
    left: 62px;
    top: 10px;
    bottom: 10px;
    border-left: 1.5px dashed color-mix(in srgb, var(--brand) 25%, transparent);
}
.cupon-vitrina-card:hover { box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--brand) 45%, transparent); transform: translateY(-2px); }
.cupon-vitrina-card:disabled { opacity: .6; cursor: wait; }
.cupon-vitrina-img {
    width: 40px;
    height: 40px;
    border-radius: var(--r-sm);
    object-fit: cover;
    flex-shrink: 0;
    background: var(--surface-2);
}
.cupon-vitrina-img-global {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background: color-mix(in srgb, var(--brand) 8%, var(--surface-2));
}
.cupon-vitrina-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-left: 8px; }
.cupon-vitrina-codigo {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 14.5px;
    color: var(--brand);
    letter-spacing: .04em;
    text-transform: uppercase;
}
.cupon-vitrina-alcance {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cupon-vitrina-beneficio { font-size: 13px; font-weight: 700; color: var(--ink); }
.cupon-vitrina-alcance { font-size: 11.5px; color: var(--ink-muted); }
.cupon-vitrina-minimo { font-size: 11px; color: var(--ink-muted); }
.cupon-vitrina-cargando { font-size: 13px; font-weight: 700; color: var(--brand); }
.cupon-vitrina-esqueleto {
    flex: 0 0 220px;
    height: 96px;
    border-radius: var(--r-md);
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
    background-size: 400% 100%;
    animation: brillo-esqueleto 1.4s ease infinite;
}

.seccion-tiendas-destacadas { margin-bottom: var(--space-7); }
.seccion-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-4); flex-wrap: wrap; gap: var(--space-2); }
.seccion-header h2 { margin: 0; }

/* ============ NUESTRAS MARCAS (carrusel automático) — mismo patrón que
   la página de Inicio, reutilizado aquí antes del catálogo. ============ */
.ini-marcas { margin-bottom: var(--space-7); }
.ini-marcas .mkt-seccion-fija { margin-bottom: var(--space-3); }
.ini-marcas-viewport {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ini-marcas-track {
    display: flex;
    gap: var(--space-6);
    width: max-content;
    animation: ini-marcas-scroll 28s linear infinite;
}
.ini-marcas-viewport:hover .ini-marcas-track { animation-play-state: paused; }
@keyframes ini-marcas-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
.ini-marca-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 64px;
    padding: 0 var(--space-6);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--text-lg);
    color: var(--ink-muted);
    text-transform: uppercase;
    white-space: nowrap;
    opacity: .8;
    transition: opacity .2s ease, color .2s ease;
    text-decoration: none;
}
.ini-marca-item img { height: 32px; width: 32px; object-fit: contain; border-radius: 6px; background: var(--white); flex-shrink: 0; }
.ini-marca-item:hover { opacity: 1; color: var(--brand); }
@media (prefers-reduced-motion: reduce) { .ini-marcas-track { animation: none; } }
@media (max-width: 640px) {
    .ini-marca-item { height: 52px; font-size: var(--text-base); padding: 0 var(--space-4); }
    .ini-marca-item img { height: 26px; width: 26px; }
    .ini-marcas-track { gap: var(--space-4); }
}

/* "Nuestras marcas" del Marketplace (#seccion-marcas-mkt) — pedido del
   usuario: ocultarla SOLO en escritorio, y SOLO acá (la de Inicio,
   #ini-marcas-seccion en inicio.css, no se toca). Mismo corte de
   escritorio que ya usa el catálogo de esta página (.catalogo-layout,
   más abajo): a partir de 901px. Sigue visible en celular/tablet. */
@media (min-width: 901px) {
    #seccion-marcas-mkt { display: none; }
}

/* "Destacados / Recién llegados / Más vendidos" — solo celular, oculta
   en escritorio (el catálogo con filtros de al lado ya cubre esto). */
.seccion-mkt-tabs-productos { display: none; }
@media (max-width: 900px) {
    .seccion-mkt-tabs-productos {
        display: block;
        margin: 0 0 var(--space-4);
    }
    .mkt-tabs-productos-cabecera {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding: 0 var(--space-4) var(--space-3);
        -webkit-overflow-scrolling: touch;
        /* Degradado sutil al final, para que se note que hay más
           pestañas hacia la derecha (antes "Más vendidos" quedaba
           cortado justo en el borde, sin ninguna pista visual). */
        mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
        -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
    }
    .mkt-tab-producto {
        flex: 0 0 auto;
        padding: 10px 16px;
        border-radius: var(--r-md);
        border: 1px solid color-mix(in srgb, var(--brand) 7%, transparent);
        background: color-mix(in srgb, var(--white) 96%, transparent);
        box-shadow: 0 2px 8px rgba(0,0,0,.03);
        color: var(--ink);
        font-family: var(--font);
        font-size: 12.5px;
        font-weight: 700;
        cursor: pointer;
        white-space: nowrap;
        transition: var(--ease);
    }
    .mkt-tab-producto.activa {
        background: linear-gradient(135deg, var(--brand) 0%, var(--brand-mid) 100%);
        border-color: transparent;
        color: var(--white);
    }
    .fila-mkt-tabs-productos {
        display: flex;
        align-items: stretch;
        gap: var(--space-3);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding: 0 var(--space-4) 4px;
        -webkit-overflow-scrolling: touch;
    }
    .fila-mkt-tabs-productos .producto-card-mkt { flex: 0 0 148px; scroll-snap-align: start; }
}


.fila-tiendas-destacadas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-4);
}
/* Píldora compacta de tienda (avatar circular + nombre) — usada solo en
   la fila destacada de arriba; el modal "Ver todas las tiendas" sigue
   usando .tienda-card (la tarjeta completa). */
.tienda-pildora {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--white);
    border: 1px solid color-mix(in srgb, var(--brand) 8%, transparent);
    border-radius: var(--r-full);
    padding: 6px 18px 6px 6px;
    text-decoration: none;
    color: var(--ink);
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    transition: var(--ease);
}
.tienda-pildora:hover { text-decoration: none; box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--brand) 35%, transparent); border-color: color-mix(in srgb, var(--brand-mid) 30%, transparent); }
.tienda-pildora-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--brand-mid));
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    flex-shrink: 0;
    overflow: hidden;
}
.tienda-pildora-avatar-img { background: var(--white); border: 1px solid var(--surface-3); }
.tienda-pildora-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tienda-pildora span { font-size: 13px; font-weight: 700; white-space: nowrap; }
/* Vista previa (no "ver todas"): mismo carrusel automático que "Nuestras
   marcas" en el inicio — se activa desde JS agregando .animado, que
   duplica las tarjetas para el efecto de scroll infinito sin salto. */
.tiendas-viewport:has(.fila-tiendas-destacadas.animado) {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.fila-tiendas-destacadas.animado {
    display: flex;
    width: max-content;
    animation: tiendas-destacadas-scroll 24s linear infinite;
}
.tiendas-viewport:hover .fila-tiendas-destacadas.animado { animation-play-state: paused; }
@keyframes tiendas-destacadas-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ============ MODAL "TODAS LAS TIENDAS" ============ */
.modal-todas-tiendas {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
}
.modal-todas-tiendas.ini-visible { display: flex; }
.modal-todas-tiendas-fondo { position: absolute; inset: 0; background: rgba(10,30,60,.55); backdrop-filter: blur(2px); }
.modal-todas-tiendas-contenido {
    position: relative;
    z-index: 1;
    background: var(--white);
    border-radius: var(--r-lg);
    max-width: 1100px;
    width: 100%;
    max-height: 86vh;
    overflow-y: auto;
    padding: var(--space-6);
}
.modal-todas-tiendas-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-5); position: sticky; top: 0; background: var(--white); padding-bottom: var(--space-2); }
.modal-todas-tiendas-header h2 { margin: 0; }
.modal-todas-tiendas-cerrar {
    border: none;
    background: var(--surface-2);
    color: var(--ink-muted);
    width: 36px; height: 36px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: var(--ease);
    flex-shrink: 0;
}
.modal-todas-tiendas-cerrar:hover { background: var(--surface-3); color: var(--ink); }
#grid-todas-tiendas { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-4); }
@media (max-width: 640px) {
    .modal-todas-tiendas { padding: 0; align-items: flex-end; }
    .modal-todas-tiendas-contenido { border-radius: var(--r-lg) var(--r-lg) 0 0; max-height: 92vh; }
}
.fila-tiendas-destacadas.animado .tienda-card { flex: 0 0 220px; }

.tienda-preview-hover {
    position: absolute;
    z-index: 300;
    width: 260px;
    background: var(--white);
    border: 1px solid var(--surface-3);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-4);
    text-align: center;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
}
.tienda-preview-hover.visible { opacity: 1; transform: translateY(0); }
.tienda-preview-hover img {
    width: 72px; height: 72px;
    border-radius: 50%;
    object-fit: contain;
    background: var(--surface-2);
    padding: 8px;
    box-sizing: border-box;
    margin: 0 auto 10px;
    display: block;
}
.tienda-preview-hover-inicial {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--brand));
    color: var(--white);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 800; font-size: 20px;
    margin: 0 auto 10px;
}
.tienda-preview-hover h4 { margin: 0 0 4px; font-family: var(--font-display); font-size: var(--text-base); text-transform: uppercase; }
.tienda-preview-hover-ubicacion { margin: 0 0 8px; font-size: var(--text-xs); color: var(--ink-muted); text-transform: uppercase; }
.tienda-preview-hover-desc { margin: 0 0 10px; font-size: var(--text-sm); color: var(--ink-light); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tienda-preview-hover-cta { font-size: var(--text-xs); font-weight: 700; color: var(--brand); }
@media (max-width: 640px) {
    .fila-tiendas-destacadas {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        margin: 0 -16px;
        padding: 0 16px var(--space-2);
        -webkit-overflow-scrolling: touch;
    }
    .fila-tiendas-destacadas .tienda-pildora { scroll-snap-align: start; }
}
.tienda-card {
    position: relative;
    background: color-mix(in srgb, var(--white) 97%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand) 7%, transparent);
    border-radius: var(--r-lg);
    box-shadow: 0 14px 32px -18px color-mix(in srgb, var(--brand) 35%, transparent), var(--shadow-md);
    padding: var(--space-5);
    text-decoration: none;
    color: inherit;
    transition: var(--ease);
    display: block;
    overflow: hidden;
}
.tienda-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--brand-mid), var(--brand));
    opacity: 0;
    transition: opacity .25s ease;
}
.tienda-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 26px 46px -20px color-mix(in srgb, var(--brand) 42%, transparent), var(--shadow-lg);
    border-color: color-mix(in srgb, var(--brand-mid) 35%, transparent);
}
.tienda-card:hover::before { opacity: 1; }
.tienda-card-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 26%, var(--white)), color-mix(in srgb, var(--brand) 16%, var(--white)));
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--text-md);
    margin-bottom: var(--space-3);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 20%, transparent);
}
.tienda-card h4 { margin: 0 0 4px; font-size: var(--text-base); color: var(--ink); text-transform: uppercase; }
.tienda-card p { margin: 0; font-size: var(--text-xs); color: var(--ink-muted); }
.tienda-card-avatar-img { padding: 0; overflow: hidden; }
.tienda-card-avatar-img img { width: 100%; height: 100%; object-fit: contain; background: var(--white); padding: 6px; box-sizing: border-box; border-radius: 50%; }
.tienda-esqueleto {
    height: 40px;
    width: 130px;
    flex: 0 0 auto;
    border-radius: var(--r-full);
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
    background-size: 400% 100%;
    animation: brillo-esqueleto 1.4s ease infinite;
}
@keyframes brillo-esqueleto { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ============ CATÁLOGO ============ */
.catalogo-buscador {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    background: color-mix(in srgb, var(--white) 97%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand) 6%, transparent);
    box-shadow: 0 10px 26px -18px color-mix(in srgb, var(--brand) 40%, transparent), var(--shadow-sm);
}
.catalogo-buscador input[type="search"] {
    flex: 1;
    padding: 14px 18px 14px 44px;
    font-size: var(--text-base);
    border-radius: var(--r-full);
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236A85A0' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 16px center / 18px;
}
@media (max-width: 640px) { .catalogo-buscador input[type="search"] { font-size: 16px; } }
.catalogo-buscador select { width: auto; min-width: 180px; }

/* Barra de categorías fija (sticky) — solo en celular, donde el
   sidebar de filtros está oculto. Se queda pegada justo debajo del
   encabezado del sitio mientras se hace scroll por el catálogo, para
   poder cambiar de categoría sin tener que volver arriba — mismo
   patrón que usan Mercado Libre/Amazon en su vista móvil. */
.chips-categoria-sticky { display: none; }
.chip-categoria {
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 7px 14px;
    border-radius: var(--r-full);
    border: 1.5px solid color-mix(in srgb, var(--ink) 10%, transparent);
    background: var(--white);
    color: var(--ink);
    font-family: var(--font);
    font-weight: 700;
    font-size: 12.5px;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--ease);
}
.chip-categoria.activo {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-mid) 100%);
    border-color: transparent;
    color: var(--white);
    box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--brand) 55%, transparent);
}
.catalogo-buscador input:focus,
.catalogo-buscador select:focus {
    outline: none;
    border-color: var(--brand-mid);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent);
}

.catalogo-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: var(--space-6);
    align-items: start;
    min-width: 0;
}
.catalogo-layout > * { min-width: 0; }
@media (max-width: 900px) { .catalogo-layout { grid-template-columns: 1fr; } }

@media (min-width: 901px) {
    .catalogo-sidebar { position: sticky; top: 88px; }
    .btn-abrir-filtros-movil { display: none; } /* en escritorio los filtros ya están fijos al costado, no hace falta el botón */
    .catalogo-sidebar-header-movil,
    .catalogo-sidebar-fondo { display: none; }
}

/* ========================================================================
   FILTROS COMO WIDGET (solo celular) — en vez de un bloque fijo que
   empuja el catálogo hacia abajo, el panel de filtros se desliza desde
   la IZQUIERDA al tocar "Filtros" junto al buscador — ahí vive todo lo
   que sea filtrar (categorías, precio, promociones), en una sola
   columna.
   ======================================================================== */
@media (max-width: 900px) {
    .btn-abrir-filtros-movil {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
        background: var(--surface-2);
        border: 1.5px solid color-mix(in srgb, var(--brand) 20%, transparent);
        border-radius: var(--r-sm);
        padding: 10px 14px;
        font-family: var(--font);
        font-weight: 700;
        font-size: 13px;
        color: var(--brand);
        cursor: pointer;
    }
    .btn-abrir-filtros-movil:active { background: color-mix(in srgb, var(--brand) 8%, var(--surface-2)); }
    .catalogo-sidebar {
        position: fixed;
        top: 96px;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        background: var(--white);
        border-radius: 26px 26px 0 0;
        /* Más alto que cualquier otro elemento fijo del sitio (el modal
           de zoom de imagen, que era el más alto antes, usa 1300) —
           así el panel de filtros nunca queda tapado por nada,
           encabezado incluido. */
        z-index: 1400;
        overflow-y: auto;
        padding: 0 var(--space-4) 90px;
        transform: translateY(100%);
        transition: transform .28s ease;
        box-shadow: 0 -10px 40px rgba(10,30,60,.25);
    }
    .catalogo-sidebar.abierto-movil { transform: translateY(0); }
    .catalogo-sidebar-fondo {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        /* No cubre toda la pantalla a propósito — se detiene justo
           arriba de la barra inferior fija (62px, ver
           .barra-inferior-movil en estilos.css) para no oscurecerla ni
           bloquearle los clics. La barra inferior (Inicio, Marketplace,
           Distribución, Fábrica, Carrito, Buscar) debe seguir visible y
           utilizable en todo momento — lo único que puede tapar sus
           botones es el panel de filtros en sí (que sí va por encima,
           al deslizarse desde abajo), nunca este fondo oscuro. */
        bottom: 62px;
        background: rgba(10,30,60,.45);
        z-index: 1399;
        opacity: 0;
        pointer-events: none;
        transition: opacity .28s ease;
    }
    .catalogo-sidebar-fondo.visible { opacity: 1; pointer-events: auto; }
    /* Encabezado blanco, pegado arriba del todo (sticky) — antes era
       un degradado de marca; en el rediseño el encabezado del panel
       de filtros es blanco y sobrio, el color se reserva para las
       píldoras seleccionadas dentro. */
    .catalogo-sidebar-header-movil {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: 0 calc(var(--space-4) * -1) var(--space-3);
        padding: 18px var(--space-4) 14px;
        font-weight: 800;
        font-size: 17px;
        background: var(--white);
        color: #0B2545;
        border-bottom: 1px solid #EEF1F5;
        position: sticky;
        top: 0;
        z-index: 1;
    }
    .catalogo-sidebar-cerrar {
        background: #F2F5F9;
        border: none;
        border-radius: 17px;
        width: 34px; height: 34px;
        font-size: 15px;
        cursor: pointer;
        color: #0B2545;
        flex-shrink: 0;
    }
    /* El desplegable interno ("Filtros" con la flechita) ya no existe
       — se quitó junto con el título "Filtros" a pedido, el panel EN SÍ
       ya es lo desplegable ahora. */
    .catalogo-sidebar .filtros-lista-completa { border: none; box-shadow: none; padding: 0; }
    .catalogo-sidebar .btn-limpiar-filtros-arriba {
        width: 100%;
        text-align: center;
        background: var(--white);
        border: 1px solid color-mix(in srgb, var(--brand) 15%, transparent);
        border-radius: var(--r-md);
        padding: 10px;
        margin-bottom: var(--space-4);
        font-weight: 700;
    }

    .btn-abrir-filtros-movil {
        flex-shrink: 0;
        white-space: nowrap;
        font-size: 13px;
        padding: 10px 14px;
    }

    /* Botón fijo abajo del panel de filtros — para no tener que
       hacer scroll hasta arriba a buscar la "✕" después de elegir
       los filtros. */
    .catalogo-sidebar { padding-bottom: 0; display: flex; flex-direction: column; }
    .catalogo-sidebar .filtros-lista-completa { flex: 1; padding-bottom: var(--space-4); }
    .catalogo-sidebar-acciones-fijas {
        position: sticky;
        bottom: 0;
        display: flex;
        gap: 10px;
        padding: 12px 0 18px;
        background: var(--white);
        border-top: 1px solid #EEF1F5;
    }
    .btn-cancelar-filtros-movil {
        flex: 0 0 auto;
        height: 50px;
        padding: 0 20px;
        border-radius: 15px;
        border: 1px solid #D7E1EC;
        background: #fff;
        color: #41566E;
        font-size: 14px;
        font-weight: 700;
    }
    .btn-ver-resultados-movil {
        flex: 1 1 0;
        width: auto;
        height: 50px;
        background: #0B57A4;
        color: #fff;
        border: none;
        border-radius: 15px;
        font-weight: 800;
        font-size: 14.5px;
        cursor: pointer;
        box-shadow: none;
    }
}
.btn-ver-resultados-movil, .btn-cancelar-filtros-movil { display: none; }

/* Antes cada bloque de filtro llevaba un emoji distinto (🏪, 📂, 🧭...)
   delante del título — a pedido, se quitó por verse poco profesional;
   los títulos en negrita ya se distinguen bien solos. */

.filtro-bloque {
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    background: color-mix(in srgb, var(--white) 97%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand) 6%, transparent);
    box-shadow: 0 8px 20px -14px color-mix(in srgb, var(--brand) 35%, transparent), var(--shadow-sm);
}
.filtro-bloque h3 { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 800; margin: 0 0 var(--space-3); color: var(--ink); }

.lista-filtro-radio { display: flex; flex-direction: column; gap: 2px; }
.lista-filtro-radio label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--ink-light);
    margin: 0;
    padding: 6px 8px;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.lista-filtro-radio label:hover { background: color-mix(in srgb, var(--brand) 6%, transparent); }
.lista-filtro-radio label:has(input:checked) {
    background: color-mix(in srgb, var(--brand) 9%, transparent);
    color: var(--brand);
    font-weight: 700;
}
.lista-filtro-radio input { width: auto; padding: 0; accent-color: var(--brand); }
/* Checkboxes de "Explorar" y "Promociones" con apariencia circular —
   mismo círculo que ya tienen los radios de "Categorías" de forma
   nativa, para que las 3 secciones se vean con el mismo lenguaje
   visual (siguen siendo checkboxes por dentro: se pueden combinar
   varios a la vez, a diferencia de Categorías). */
.lista-filtro-radio input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 17px;
    height: 17px;
    border: 2px solid color-mix(in srgb, var(--brand) 35%, transparent);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: var(--ease);
}
.lista-filtro-radio input[type="checkbox"]:checked {
    border-color: var(--brand);
    background: var(--brand);
    box-shadow: inset 0 0 0 3px var(--white);
}
.categorias-sin-datos { font-size: var(--text-xs); color: var(--ink-muted); line-height: 1.5; }

/* Categorías del sidebar de Filtros (escritorio) — antes era una
   lista de puro texto plano, se ve más pobre que el resto del panel
   (Tiendas ya tiene su avatar). Se agrega un ícono de línea (mismo
   set que usa Distribución) y la cantidad de productos, sin tocar
   el radio nativo ni el resto de .lista-filtro-radio (lo comparten
   los checkboxes de Explorar/Promociones). */
#lista-categorias .categoria-filtro-ico {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand);
    opacity: .65;
    flex-shrink: 0;
    transition: opacity .15s ease;
}
#lista-categorias .categoria-filtro-ico svg { width: 15px; height: 15px; }
#lista-categorias label:has(input:checked) .categoria-filtro-ico { opacity: 1; }
#lista-categorias .categoria-filtro-nombre {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#lista-categorias .categoria-filtro-cantidad {
    font-size: 11px;
    font-weight: 700;
    color: var(--ink-muted);
    background: color-mix(in srgb, var(--ink) 6%, transparent);
    border-radius: 999px;
    padding: 1px 7px;
    flex-shrink: 0;
}
#lista-categorias label:has(input:checked) .categoria-filtro-cantidad {
    color: var(--white);
    background: var(--brand);
}

.fila-precio { display: flex; gap: var(--space-2); }
.btn-precio-aplicar { width: 100%; margin-top: var(--space-3); }

/* Lista de tiendas dentro del panel de Filtros — avatar chico + nombre,
   clic lleva directo a esa tienda (no es un filtro que se combine con
   los demás, es una forma rápida de navegar sin salir del panel). */
.lista-tiendas-filtro { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; }
.lista-tiendas-filtro a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: var(--r-sm);
    text-decoration: none;
    color: var(--ink);
    font-size: var(--text-sm);
    font-weight: 600;
    transition: var(--ease);
}
.lista-tiendas-filtro a:hover { background: var(--surface-2); text-decoration: none; }
.lista-tiendas-filtro-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--brand-mid));
    color: var(--white);
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.lista-tiendas-filtro-avatar img { width: 100%; height: 100%; object-fit: cover; }

.catalogo-conteo { color: var(--ink-muted); font-size: var(--text-sm); margin: 0; }

.catalogo-resultados-cabecera { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }
.btn-limpiar-busqueda-movil { display: none; }
@media (max-width: 640px) {
    /* Solo se ve cuando hay una búsqueda activa (ver mercado.js) — como
       los demás filtros están ocultos en celular (el mini buscador de
       abajo los reemplaza), esta es la única forma rápida de volver a
       ver todo el catálogo sin tener que borrar el texto a mano. */
    .btn-limpiar-busqueda-movil {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background: var(--surface-2);
        border: 1px solid var(--surface-3);
        border-radius: var(--r-full);
        color: var(--ink-light);
        font-size: 12.5px;
        font-weight: 600;
        padding: 7px 14px;
        margin-bottom: var(--space-3);
        cursor: pointer;
    }
    .btn-limpiar-busqueda-movil.oculto { display: none; }
}
.vista-catalogo-switch { display: flex; gap: 4px; background: var(--surface-2); border-radius: var(--r-full); padding: 4px; }
.vista-catalogo-btn {
    border: none;
    background: none;
    padding: 7px 14px;
    border-radius: var(--r-full);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--ink-muted);
    cursor: pointer;
    transition: var(--ease);
}
.vista-catalogo-btn.activo { background: var(--white); color: var(--brand); box-shadow: var(--shadow-sm); }

/* ============ VISTA "POR CATEGORÍAS" (explorar todo el catálogo sin paginar) ============ */
.categoria-fila { margin-bottom: var(--space-6); }
.categoria-fila-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-3); }
.categoria-fila-header h3 { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); }
.categoria-fila-scroll {
    display: flex;
    gap: var(--space-4);
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x proximity;
}
.categoria-fila-scroll .producto-card-mkt { flex: 0 0 200px; scroll-snap-align: start; transition: transform .25s ease, box-shadow .25s ease; }
.categoria-fila-scroll .producto-card-mkt:hover { transform: translateY(-6px) scale(1.04); box-shadow: 0 20px 34px -16px color-mix(in srgb, var(--brand) 35%, transparent); z-index: 2; position: relative; }
.catalogo-vacio {
    color: var(--ink-muted);
    text-align: center;
    padding: var(--space-7) var(--space-4);
    font-size: var(--text-sm);
    max-width: 360px;
    margin: 0 auto;
    position: relative;
}
.catalogo-vacio::before {
    content: "";
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 auto var(--space-3);
    background: var(--surface-2);
    border-radius: 50%;
    background-image: radial-gradient(circle, var(--surface-3) 30%, transparent 32%);
}

.grid-productos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-4);
}
@media (max-width: 640px) {
    .grid-productos { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
}
@media (max-width: 380px) {
    .grid-productos { gap: 10px; }
}
.producto-card-mkt {
    background: color-mix(in srgb, var(--white) 98%, transparent);
    border-radius: var(--r-lg);
    box-shadow: 0 3px 10px rgba(0,0,0,.045);
    border: 1px solid color-mix(in srgb, var(--ink) 5%, transparent);
    overflow: hidden;
    transition: var(--ease);
}
.producto-card-mkt:hover {
    box-shadow: 0 26px 44px -20px color-mix(in srgb, var(--brand) 38%, transparent), var(--shadow-lg);
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--brand-mid) 30%, transparent);
}
.producto-card-img-wrap { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--white); overflow: hidden; flex-shrink: 0; }
.producto-card-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.producto-card-mkt:hover .producto-card-img { transform: scale(1.06); }
.producto-card-img-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.08) 100%);
    opacity: 0;
    transition: opacity .3s ease;
}
.producto-card-mkt:hover .producto-card-img-wrap::after { opacity: 1; }
.producto-card-body { padding: var(--space-4); }
@media (max-width: 640px) {
    .producto-card-body { padding: 12px; }
    .producto-card-nombre { font-size: 14px; }
    .producto-card-precio { font-size: 17px; } /* precio grande y bien legible, como en Amazon — es lo primero que se busca con la vista */
    .producto-card-descripcion {
        max-height: 42px;
        font-size: 12px;
    }

    /* "Explora por categoría" en celular: sin título ni desplegable —
       el círculo de "Ver todas" (agregado por JS al final de la fila)
       reemplaza al enlace de texto. */
    .seccion-categorias-hero { margin-bottom: var(--space-4); }
    #categorias-hero-titulo { display: none; }
}
.producto-card-nombre {
    display: block;
    font-weight: 700;
    font-size: var(--text-sm);
    color: var(--ink);
    text-decoration: none;
    margin-bottom: 4px;
    line-height: 1.3;
}
.producto-card-tienda {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--brand);
    text-decoration: none;
    margin: 10px 0 6px;
}
.producto-card-tienda:hover { text-decoration: underline; }
.producto-card-precio { font-family: var(--font-display); font-weight: 800; color: var(--brand); font-size: var(--text-md); }
.producto-card-precio.en-promocion { display: flex; flex-direction: column; gap: 2px; }
.producto-card-promo-badge {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #FEE9E4, #FDD9D0);
    color: #C9430F;
    font-family: var(--font);
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: .02em;
    padding: 2px 8px;
    border-radius: var(--r-full);
    margin-bottom: 2px;
    box-shadow: 0 2px 6px rgba(201,67,15,.18);
}
.producto-card-precio-antes {
    font-family: var(--font);
    font-weight: 600;
    color: var(--ink-muted);
    font-size: var(--text-xs);
    text-decoration: line-through;
}
.producto-card-precio-actual {
    font-family: var(--font-display);
    font-weight: 800;
    color: #C9430F;
    font-size: var(--text-md);
}

.producto-card-acciones {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin-top: var(--space-3);
}

/* Selector de cantidad (+/-) arriba del botón Agregar — deja elegir
   1, 2, 3... unidades y agregarlas todas de una vez, sin tener que
   tocar "Agregar" varias veces. */
.producto-card-cantidad {
    display: flex;
    align-items: stretch;
    gap: 6px;
    margin-top: var(--space-2);
}
.producto-card-cantidad button {
    width: 32px;
    flex-shrink: 0;
    background: var(--surface-2);
    border: 1px solid var(--surface-3);
    border-radius: var(--r-sm);
    font-size: 16px;
    font-weight: 700;
    color: var(--brand);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--ease);
}
.producto-card-cantidad button:hover { background: color-mix(in srgb, var(--brand) 10%, var(--surface-2)); }
.producto-card-cantidad button:active { transform: scale(.94); }
.input-cantidad-card {
    flex: 1;
    min-width: 0;
    text-align: center;
    border: 1px solid var(--surface-3);
    border-radius: var(--r-sm);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    color: var(--ink);
    padding: 0 4px;
    -moz-appearance: textfield;
}
.input-cantidad-card::-webkit-outer-spin-button,
.input-cantidad-card::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.btn-agregar-carrito {
    width: 100%;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-mid) 100%);
    color: var(--white);
    border: none;
    border-radius: var(--r-full);
    padding: 13px 14px;
    min-height: 46px;
    font-family: var(--font);
    font-size: 14.5px;
    font-weight: 800;
    cursor: pointer;
    transition: var(--ease);
    white-space: nowrap;
    box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--brand) 45%, transparent);
}
.btn-agregar-carrito:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn-agregar-carrito.agregado { background: linear-gradient(135deg, #0f7a7a, #0d9488); }
.btn-ir-perfil {
    text-align: center;
    font-size: 12px;
    color: var(--ink-muted);
    text-decoration: none;
    padding: 4px;
}
.btn-ir-perfil:hover { color: var(--brand); text-decoration: underline; }

.paginacion-mercado { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-6); }
.paginacion-mercado button {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1px solid var(--ink-subtle);
    background: var(--white);
    color: var(--ink-light);
    font-weight: 600;
    cursor: pointer;
    transition: var(--ease);
}
.paginacion-mercado button:hover:not(:disabled) { border-color: var(--brand-mid); color: var(--brand); }
.paginacion-mercado button.activa {
    background: linear-gradient(135deg, var(--brand), var(--brand-mid));
    color: var(--white);
    border-color: transparent;
    box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--brand) 50%, transparent);
}
.paginacion-mercado button:disabled { opacity: .4; cursor: default; }

.footer-mercado {
    text-align: center;
    color: var(--ink-muted);
    font-size: var(--text-xs);
    padding: var(--space-6);
    margin-top: var(--space-7);
    border-top: 1px solid color-mix(in srgb, var(--brand) 8%, transparent);
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--brand) 5%, transparent));
}
.footer-mercado-enlaces { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; margin-top: var(--space-3); }
.footer-mercado-enlaces a { color: var(--ink-muted); text-decoration: none; }
.footer-mercado-enlaces a:hover { color: var(--brand); text-decoration: underline; }
@media (max-width: 640px) {
    .footer-mercado { padding: var(--space-5) var(--space-4); }
    .footer-mercado-enlaces { gap: var(--space-3) var(--space-4); }
}

/* ============ TIENDA (perfil de vendedor) ============ */
.volver-marketplace { display: inline-block; margin-bottom: var(--space-5); }
.tienda-cargando { text-align: center; color: var(--ink-muted); padding: var(--space-7) 0; }

.tienda-perfil-header { margin-bottom: var(--space-5); }

.tienda-portada {
    position: relative;
    z-index: 1;
    height: 320px;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-mid) 55%, var(--accent) 100%);
    overflow: hidden;
}
.tienda-portada::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.22) 1.5px, transparent 1.5px);
    background-size: 24px 24px;
    opacity: .6;
}
.tienda-portada::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.28) 100%);
}
.tienda-portada img { width: 100%; height: 100%; object-fit: cover; display: block; position: relative; z-index: 0; }
@media (max-width: 640px) { .tienda-portada { height: 200px; } }

.tienda-banner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: var(--space-5);
    background: color-mix(in srgb, var(--white) 98%, transparent);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    box-shadow: 0 24px 44px -24px color-mix(in srgb, var(--brand) 35%, transparent), var(--shadow-md);
    padding: var(--space-6);
    padding-top: var(--space-4);
}
.tienda-banner-avatar {
    position: relative;
    z-index: 3;
    width: 96px; height: 96px;
    border-radius: 50%;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 26%, var(--white)), color-mix(in srgb, var(--brand) 16%, var(--white)));
    color: var(--brand);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl);
    flex-shrink: 0;
    margin-top: -56px;
    border: 4px solid var(--white);
    box-shadow: 0 10px 24px -6px color-mix(in srgb, var(--brand) 35%, transparent), 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
    overflow: hidden;
}
/* Un logo real casi nunca es perfectamente cuadrado (muchos son más
   anchos que altos). Dentro de un marco circular, aunque la imagen use
   "contain", sus esquinas pueden salirse del círculo y quedar cortadas —
   por eso el padding es más grande de lo que parece necesario: reduce el
   área visible al "cuadrado inscrito" del círculo, donde ninguna esquina
   se recorta sin importar la proporción del logo. */
.tienda-banner-avatar img { width: 100%; height: 100%; object-fit: contain; background: var(--white); padding: 16px; box-sizing: border-box; }
@media (max-width: 640px) {
    .tienda-banner { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
    .tienda-banner-avatar { width: 72px; height: 72px; margin-top: -44px; }
}
.tienda-banner-info h1 { margin: 0 0 var(--space-2); text-transform: uppercase; }
.tienda-banner-meta { display: flex; gap: var(--space-4); flex-wrap: wrap; color: var(--ink-muted); font-size: var(--text-sm); }
/* Marcas y ciudades siempre en mayúscula en pantalla, sin importar cómo
   las haya escrito el vendedor en su perfil o al subir el producto. */
.texto-mayuscula { text-transform: uppercase; }
#tienda-ubicacion, #tienda-ubicacion-completa { text-transform: uppercase; }

.tienda-tabs { margin-bottom: var(--space-5); }
.tienda-tabs .tab { position: relative; transition: color .2s ease; }
.tienda-tabs .tab.activa { color: var(--brand); }
.tienda-tabs .tab.activa::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--accent), var(--brand-mid), var(--brand));
}
.tienda-descripcion { color: var(--ink-light); line-height: 1.6; }
.tienda-datos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-4);
    margin: var(--space-5) 0;
    padding-top: var(--space-5);
    border-top: 1px solid var(--surface-3);
}
.tienda-datos-grid div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: color-mix(in srgb, var(--brand) 4%, var(--white));
    border: 1px solid color-mix(in srgb, var(--brand) 7%, transparent);
    border-radius: var(--r-md);
    padding: var(--space-3) var(--space-4);
}
.tienda-datos-grid strong { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .03em; color: var(--ink-muted); }
.tienda-datos-grid span { font-size: var(--text-sm); color: var(--ink); font-weight: 600; }
.tienda-redes { display: flex; gap: var(--space-3); }
.tienda-redes a { color: var(--brand); font-size: var(--text-sm); font-weight: 600; text-decoration: none; }
.tienda-redes a:hover { text-decoration: underline; }
.tienda-banner-redes { margin-top: 6px; flex-wrap: wrap; }
.tienda-banner-redes:empty { display: none; }
.tienda-banner-redes a { font-size: var(--text-xs); background: var(--surface-2); padding: 4px 10px; border-radius: var(--r-full); }
.tienda-banner-redes a:hover { text-decoration: none; background: var(--accent-dim, #E6F7F7); }
.tienda-lista-politicas { color: var(--ink-light); line-height: 1.7; padding-left: var(--space-5); }
/* =========================================================
   COMPARTIDO ENTRE TODAS LAS PÁGINAS DEL MARKETPLACE
   (mercado.html, tienda.html y la landing): íconos SVG, badges
   de producto, favorito, descripción truncada, tamaño uniforme
   de tarjeta y el modal de vista previa. La landing (inicio.css)
   ya tenía sus propias reglas para esto; se agregan aquí también
   para que mercado.html/tienda.html -que no cargan inicio.css-
   se vean y funcionen igual. Las declaraciones son las mismas:
   si una regla ya llegó a aplicarse antes vía inicio.css no hay
   conflicto, solo se reafirma.
   ========================================================= */

.ini-ico { width: 20px; height: 20px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ini-ico-sm { width: 16px; height: 16px; }
.ini-ico-lg { width: 28px; height: 28px; }

a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---- Tarjeta de producto: mismo tamaño, badges, favorito, descripción ---- */
.producto-card-mkt {
    position: relative;
    display: flex;
    flex-direction: column;
    /* Antes tenía "height: 100%" — pero dentro de un contenedor flex con
       overflow-x:auto (como el carrusel de "Ofertas de la semana"), el
       100% no se resolvía bien y las tarjetas quedaban con distinta
       altura según su contenido (con o sin envío gratis, etc). Quitarlo
       deja que "align-items: stretch" del contenedor (ya puesto en
       .ini-ofertas-grid y equivalentes) sea quien iguale la altura,
       que es más confiable en este caso.
       align-self: stretch se agrega explícito para no depender del
       valor heredado por si algún contenedor padre lo cambia. */
    align-self: stretch;
    cursor: pointer;
}
.producto-card-body { display: flex; flex-direction: column; flex: 1; }
/* El selector de cantidad + el botón "Agregar" se anclan al fondo COMO
   GRUPO. Antes solo .producto-card-cantidad tenía margin-top:auto — en
   teoría, con un solo auto-margin en la columna, todo lo que viene
   después (el botón) debería moverse junto con él sin variar su
   posición entre tarjetas. En la práctica (probado en vivo) el navegador
   seguía repartiendo el espacio libre también en el margen del botón
   —aunque acá se pedía un valor fijo, no "auto"— y por eso el selector
   de cantidad quedaba a distinta altura según cuánto contenido hubiera
   arriba (ej. la nota nueva de "con este producto, tu X tiene
   descuento", más larga que "Envío gratis"). Forzar el margen del botón
   a 0 con !important (dejando SOLO el padding para el espacio visual)
   fue lo que de verdad lo resolvió. */
.producto-card-cantidad { margin-top: auto; }
.producto-card-acciones { margin-top: 0 !important; padding-top: var(--space-3); }

.producto-card-badges {
    position: absolute;
    top: 10px; left: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 2;
}
.producto-card-badge {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .02em;
    padding: 4px 9px;
    border-radius: var(--r-full);
    color: var(--white);
    text-transform: uppercase;
    box-shadow: 0 3px 8px -2px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.25);
}
.producto-card-badge-nuevo { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-mid) 100%); }
.producto-card-badge-oferta { background: linear-gradient(135deg, #F0564A 0%, #C9430F 100%); }
.producto-card-badge-original { background: linear-gradient(135deg, #14b892 0%, #0f9a7a 100%); }
.producto-card-badge-agotado { background: var(--ink-muted); box-shadow: none; }
.producto-card-badge-destacado { background: linear-gradient(135deg, #9169ff 0%, #7c4dff 100%); }
.producto-card-badge-2x1 { background: linear-gradient(135deg, #ffb84d 0%, #F5A623 100%); color: #4a3200; }

.producto-card-fav {
    position: absolute;
    top: 10px; right: 10px;
    z-index: 2;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(4px);
    border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: var(--ink-muted);
    transition: color .18s ease, transform .18s ease;
}
.producto-card-fav:hover { transform: scale(1.08); }
.producto-card-fav.ini-activo { color: #E4483C; }
.producto-card-fav.ini-activo .ini-ico { fill: currentColor; }

.producto-card-envio-gratis {
    font-size: 11px;
    color: #0f9a7a;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    background: color-mix(in srgb, #0f9a7a 10%, transparent);
    padding: 2px 8px 2px 6px;
    border-radius: var(--r-full);
}
.producto-card-descuento-adicional {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--ink);
    font-weight: 500;
    text-decoration: none;
    margin: 6px 0 10px;
    background: var(--white);
    border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
    padding: 6px 10px 6px 6px;
    border-radius: var(--r-md);
    line-height: 1.35;
    transition: var(--ease, all .15s ease);
}
.producto-card-descuento-adicional img { width: 28px; height: 28px; object-fit: contain; border-radius: 6px; background: var(--surface-2); flex-shrink: 0; }
.producto-card-descuento-adicional strong { color: var(--brand); font-weight: 700; }
.producto-card-descuento-adicional::after {
    content: '›';
    margin-left: auto;
    padding-left: 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--brand);
    flex-shrink: 0;
}
.producto-card-descuento-adicional:hover {
    border-color: var(--brand);
    box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--brand) 40%, transparent);
}
.producto-card-envio-no-incluido {
    font-size: 11px;
    color: var(--ink-muted);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    background: color-mix(in srgb, var(--ink-muted) 8%, transparent);
    padding: 2px 8px;
    border-radius: var(--r-full);
}
#ini-modal-nota-promo-extra { margin-top: var(--space-2); }
.ini-modal-nota-promo-extra-linea {
    font-size: 13px;
    font-weight: 600;
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 7%, transparent);
    border-radius: var(--r-sm);
    padding: 8px 12px;
    margin: 0 0 6px;
    line-height: 1.4;
}
#ini-modal-promo-cruzada { margin-top: var(--space-2); }
.promo-cruzada-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--r-md);
    background: color-mix(in srgb, var(--brand) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent);
    text-decoration: none;
    transition: background .15s ease;
}
.promo-cruzada-card:hover { background: color-mix(in srgb, var(--brand) 12%, transparent); }
.promo-cruzada-card img { width: 44px; height: 44px; object-fit: contain; background: var(--white); border-radius: 8px; flex-shrink: 0; }
.promo-cruzada-texto { margin: 0; font-size: 13px; font-weight: 600; color: var(--brand); line-height: 1.4; }
.cross-sell-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, .45);
    padding: var(--space-4);
}
.cross-sell-overlay.oculto { display: none; }
.cross-sell-caja {
    background: var(--white);
    border-radius: var(--r-lg, 16px);
    padding: var(--space-5);
    max-width: 360px;
    width: 100%;
    text-align: center;
    box-shadow: var(--shadow-lg, 0 20px 40px rgba(0,0,0,.2));
}
.cross-sell-caja img { width: 72px; height: 72px; object-fit: contain; background: var(--surface-2); border-radius: 10px; margin: 0 auto var(--space-3); display: block; }
.cross-sell-producto-link { display: block; text-decoration: none; }
.cross-sell-producto-link img { transition: transform .15s ease; }
.cross-sell-producto-link:hover img { transform: scale(1.04); }
.cross-sell-producto-nombre { display: block; text-align: center; font-size: 12px; font-weight: 600; color: var(--brand); margin: -6px 0 var(--space-2); }
.cross-sell-texto { margin: 0 0 var(--space-4); font-size: var(--text-sm); color: var(--ink); line-height: 1.5; }
.cross-sell-botones { display: flex; gap: var(--space-2); }
.cross-sell-botones button { flex: 1; }
.regalo-bienvenida-caja { max-width: 420px; text-align: left; }
.regalo-bienvenida-titulo { margin: 0 0 var(--space-2); font-size: 18px; font-weight: 800; color: var(--ink); text-align: center; }
.regalo-bienvenida-opciones { display: flex; flex-direction: column; gap: var(--space-2); max-height: 260px; overflow-y: auto; margin-top: var(--space-3); }
.regalo-bienvenida-opcion {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3);
    border-radius: var(--r-md);
    border: 1.5px solid var(--surface-3);
    background: var(--surface-2);
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: var(--ink);
    transition: var(--ease, all .18s ease);
}
.regalo-bienvenida-opcion:hover { background: var(--white); box-shadow: var(--shadow-sm); }
.regalo-bienvenida-opcion.activa { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, transparent); }
.regalo-bienvenida-opcion img { width: 40px; height: 40px; object-fit: contain; background: var(--white); border-radius: 8px; flex-shrink: 0; }
.regalo-bienvenida-opcion span:not(.regalo-bienvenida-opcion-check) { flex: 1; font-size: var(--text-sm); font-weight: 600; }
.regalo-bienvenida-opcion-check { font-size: 12px; font-weight: 700; color: var(--brand); }
#banner-promo-global-wrap:not(:empty) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    max-width: 1200px;
    margin: 0 auto var(--space-5);
    padding: 0 var(--space-4);
}
.banner-promo-global-tarjeta {
    position: relative;
    flex: 1;
    min-width: 260px;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--r-lg, 16px);
    background: linear-gradient(135deg, var(--brand-dark, var(--brand)), var(--brand));
    box-shadow: 0 8px 24px color-mix(in srgb, var(--brand) 28%, transparent);
    overflow: hidden;
    isolation: isolate;
}
/* Textura decorativa sutil (2 círculos translúcidos) — mismo recurso
   visual que ya usa "Ofertas de la semana", para que ambos bloques
   promocionales del sitio se sientan de la misma familia. */
.banner-promo-global-tarjeta::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--white) 16%, transparent), transparent 55%),
        radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--white) 10%, transparent), transparent 45%);
    z-index: -1;
}
.banner-promo-global-icono {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--r-full);
    background: color-mix(in srgb, var(--white) 20%, transparent);
    font-size: 24px;
}
.banner-promo-global-titulo { margin: 0; font-size: var(--text-lg, 17px); font-weight: 800; color: var(--white); }
.banner-promo-global-texto { margin: 3px 0 0; font-size: var(--text-sm); color: color-mix(in srgb, var(--white) 82%, transparent); line-height: 1.4; }
.banner-promo-global-aviso {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 7px 0 0;
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: .01em;
    color: color-mix(in srgb, var(--white) 74%, transparent);
}
.banner-promo-global-aviso svg { flex-shrink: 0; opacity: .9; }
.banner-promo-global-vigencia {
    flex-shrink: 0;
    margin: 0 0 0 auto;
    padding: 8px 16px;
    border-radius: var(--r-full);
    background: color-mix(in srgb, var(--white) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--white) 38%, transparent);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--white);
    white-space: nowrap;
}
@media (max-width: 640px) {
    /* Sin padding propio — el contenedor de la página (.mercado-main)
       ya pone el margen lateral (mismo criterio que .hero-mercado-wrap,
       que también lo pone en 0 acá); si además le sumaba el suyo, la
       tarjeta quedaba más angosta que "Ofertas de la semana" y las
       demás secciones. */
    #banner-promo-global-wrap:not(:empty) { padding: 0; margin-bottom: var(--space-4); }
    .banner-promo-global-tarjeta {
        min-width: 0;
        align-items: flex-start;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
        border-radius: var(--r-md, 12px);
    }
    .banner-promo-global-icono { width: 38px; height: 38px; font-size: 18px; margin-top: 1px; }
    .banner-promo-global-titulo { font-size: 14px; line-height: 1.3; }
    .banner-promo-global-texto { font-size: 12px; line-height: 1.4; }
    .banner-promo-global-aviso { font-size: 11px; margin-top: 5px; }
    .banner-promo-global-tarjeta { flex-wrap: wrap; }
    .banner-promo-global-vigencia { margin: 2px 0 0 50px; padding: 5px 12px; font-size: 12px; }
}
#ini-modal-escalas-distribucion { margin-top: var(--space-3); }
.ini-modal-escalas-titulo {
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: .02em;
    margin: 0 0 6px;
}
.ini-modal-escalas-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    background: color-mix(in srgb, var(--brand) 6%, transparent);
    border-radius: var(--r-sm);
    overflow: hidden;
}
.ini-modal-escalas-tabla td {
    padding: 7px 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--brand) 12%, transparent);
}
.ini-modal-escalas-tabla tr:last-child td { border-bottom: none; }
.ini-modal-escalas-tabla td:last-child { text-align: right; font-weight: 700; color: var(--brand); }
.producto-card-stock { font-size: 11px; color: var(--ink-muted); margin-top: 2px; }
.producto-card-stock-bajo {
    font-size: 11px;
    font-weight: 800;
    color: #C9430F;
    margin-top: 2px;
}

.producto-card-nombre {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 36px;
}
.producto-card-descripcion {
    display: block;
    min-height: 34px;
    max-height: 50px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    font-size: var(--text-xs);
    color: var(--ink-muted);
    line-height: 1.5;
    margin: 4px 0 0;
}
.producto-card-descripcion::-webkit-scrollbar { width: 4px; }
.producto-card-descripcion::-webkit-scrollbar-track { background: var(--surface-3); border-radius: 4px; }
.producto-card-descripcion::-webkit-scrollbar-thumb { background: var(--ink-subtle, var(--surface-3)); border-radius: 4px; }
.producto-card-precio { min-height: 54px; }
/* Reserva el mismo espacio para stock + envío gratis exista o no exista
   alguno de los dos, para que una tarjeta con envío gratis no quede más
   alta que una sin él. */
.producto-card-meta { min-height: 34px; }

/* ---- Modal: vista previa de producto ---- */
.ini-producto-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
}
@media (max-width: 640px) {
    .ini-producto-modal { padding: 0; align-items: flex-end; }
    .ini-producto-modal-contenido { max-height: 94vh; border-radius: var(--r-lg) var(--r-lg) 0 0; }
    .ini-producto-modal-imagenes { padding: var(--space-4) !important; }
    .ini-producto-modal-info { padding: var(--space-4) !important; }
}
.ini-producto-modal.ini-visible { display: flex; }
.ini-producto-modal-fondo {
    position: absolute;
    inset: 0;
    background: rgba(6,37,68,.55);
    backdrop-filter: blur(3px);
}
.ini-producto-modal-contenido {
    position: relative;
    background: var(--white);
    border-radius: var(--r-lg);
    max-width: 860px;
    width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    animation: ini-modal-entrada .22s ease;
}
@keyframes ini-modal-entrada {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.ini-producto-modal-cerrar {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    z-index: 2;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--white);
    box-shadow: var(--shadow-sm);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: var(--ink);
}
.ini-producto-modal-cerrar:hover { background: var(--surface-2); }
.ini-producto-modal-grid { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 720px) { .ini-producto-modal-grid { grid-template-columns: 1fr; } }
/* En pantallas anchas (las 2 columnas lado a lado): la imagen no se mueve,
   solo la columna de información se desplaza si su contenido no cabe. En
   móvil, donde la imagen queda arriba de la información apilada, no aplica
   este truco — ahí se deja que todo el modal se desplace junto, como antes. */
@media (min-width: 721px) {
    .ini-producto-modal-contenido { overflow: hidden; }
    .ini-producto-modal-grid { height: 88vh; max-height: 88vh; }
    .ini-producto-modal-imagenes { overflow-y: auto; }
    .ini-producto-modal-info { overflow-y: auto; }
}
.ini-producto-modal-imagenes { background: var(--surface-2); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.ini-producto-modal-img-principal { aspect-ratio: 1/1; border-radius: var(--r-lg); overflow: hidden; background: var(--white); }
.ini-producto-modal-img-principal img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }

.ini-modal-zoom {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(6,37,68,.95);
    z-index: 1300;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.ini-modal-zoom.ini-visible { display: flex; }
.ini-modal-zoom-contenido {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 98%;
    max-height: 98%;
}
/* Ancho fijo (no solo un máximo) para que las imágenes se vean del
   MISMO tamaño en el zoom sin importar la resolución de cada archivo —
   antes, con solo max-width/max-height, una imagen de menor resolución
   se veía más chica que una de mayor resolución, aunque ambas
   compartan la misma proporción 4:3 del recorte. La proporción 4:3 se
   mantiene con aspect-ratio; object-fit:contain evita que se recorte
   si alguna imagen no calza exacto. */
.ini-modal-zoom img#ini-modal-zoom-img { max-width: 100%; max-height: calc(98vh - 110px); object-fit: contain; border-radius: var(--r-lg); display: block; }
/* Cuando el zoom se abre desde el carrusel de Inicio (clase agregada
   por JS, ver inicio.js), se usa un tamaño FIJO en vez de solo un
   máximo — así todas las imágenes se ven del mismo tamaño sin importar
   la resolución de cada archivo (mismo motivo por el que esto NO se
   aplica al zoom de productos: ahí cada foto puede tener una
   proporción distinta, y forzar 4:3 la recortaría o dejaría espacio
   vacío de más). */
.ini-modal-zoom.zoom-carrusel img#ini-modal-zoom-img {
    width: min(700px, 92vw);
    max-width: none;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: rgba(255,255,255,.04);
}
.ini-modal-zoom .close-zoom {
    position: absolute;
    top: 20px; right: 28px;
    color: rgba(255,255,255,.7);
    font-size: 32px;
    cursor: pointer;
    background: none;
    border: none;
    line-height: 1;
    transition: var(--ease, color .18s ease);
}
.ini-modal-zoom .close-zoom:hover { color: var(--white); }
/* Miniaturas debajo de la imagen ampliada — solo aparecen cuando el
   zoom se abrió desde un lugar con varias imágenes (el carrusel de
   Inicio), para poder cambiar de imagen sin cerrar el zoom primero. */
.ini-modal-zoom-miniaturas {
    display: flex;
    gap: 8px;
    max-width: 100%;
    overflow-x: auto;
    padding: 2px;
}
.ini-modal-zoom-miniaturas img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid transparent;
    flex-shrink: 0;
    opacity: .6;
    transition: var(--ease, opacity .18s ease, border-color .18s ease);
}
.ini-modal-zoom-miniaturas img:hover { opacity: .85; }
.ini-modal-zoom-miniaturas img.ini-activa { opacity: 1; border-color: var(--white); }
.ini-producto-modal-galeria { display: flex; gap: 8px; flex-wrap: wrap; }
.ini-producto-modal-galeria img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; cursor: pointer; border: 2px solid transparent; }
.ini-producto-modal-galeria img.ini-activa { border-color: var(--brand); }
.ini-producto-modal-info { padding: var(--space-6) var(--space-6) var(--space-6) var(--space-5); display: flex; flex-direction: column; }
.ini-producto-modal-info .producto-card-tienda { margin: 0 0 8px; }
.ini-producto-modal-info h3 { font-family: var(--font-display); font-size: var(--text-lg); margin: 0 0 var(--space-3); color: var(--ink); padding-right: var(--space-6); }
.ini-modal-badges { position: static; flex-direction: row; margin-bottom: var(--space-3); }
.ini-modal-precio { font-size: var(--text-lg); margin-bottom: 4px; }
.ini-producto-modal-descripcion { color: var(--ink-muted); font-size: var(--text-sm); line-height: 1.6; margin: var(--space-3) 0 var(--space-5); }
.ini-producto-modal-detalles { margin: var(--space-3) 0 0; display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-3); row-gap: 4px; font-size: var(--text-sm); }
.ini-producto-modal-detalles dt { color: var(--ink-muted); font-weight: 600; }
.ini-producto-modal-detalles dd { margin: 0; color: var(--ink); }
.ini-producto-modal-acciones { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.ini-producto-modal-acciones .btn-mkt-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
body.ini-modal-abierto { overflow: hidden; }

.ini-modal-relacionados { margin-top: var(--space-4); }
.ini-modal-videos { display: flex; gap: var(--space-2); flex-wrap: wrap; margin: var(--space-3) 0; }
.ini-modal-video-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--r-full);
    background: var(--surface-2);
    color: var(--brand);
    font-size: var(--text-xs);
    font-weight: 700;
    text-decoration: none;
    border: 1px solid var(--surface-3);
    transition: var(--ease, background .18s ease);
}
.ini-modal-video-link:hover { background: var(--accent-dim, #E6F7F7); }
.related-title {
    margin: 0 0 var(--space-3);
    color: var(--brand);
    font-weight: 700;
    font-size: var(--text-sm);
    text-align: left;
}
.related-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--r-md);
    background: var(--surface-2);
    border: 1px solid var(--surface-3);
    margin-bottom: var(--space-2);
    cursor: pointer;
    transition: var(--ease, all .18s ease);
}
.related-item:hover { background: var(--white); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.related-item img { width: 44px; height: 44px; object-fit: contain; background: var(--white); border-radius: 8px; flex-shrink: 0; }
.related-name { flex: 1; font-size: var(--text-sm); color: var(--ink); font-weight: 600; text-align: left; }
.related-price-container { text-align: right; min-width: 70px; }
.related-price { color: var(--brand); font-weight: 700; font-size: var(--text-sm); }
.related-old-price { font-size: var(--text-xs); color: var(--ink-muted); text-decoration: line-through; }

/* ---- Carrito-drawer: fondo oscuro compartido (ver farmavitae-carrito.js) ---- */
.ini-carrito-fondo {
    position: fixed;
    inset: 0;
    background: rgba(6,37,68,.45);
    backdrop-filter: blur(2px);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}
.ini-carrito-fondo.ini-visible { opacity: 1; pointer-events: auto; }
body.ini-carrito-abierto { overflow: hidden; }

/* El panel del carrito pasa de dropdown a drawer lateral tipo Shopify en
   todas las páginas (antes solo lo hacía inicio.css en la landing). No se
   toca la lógica de apertura/cierre, que sigue viviendo en
   farmavitae-carrito.js vía la clase .oculto. */
.panel-carrito {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(420px, 100vw);
    max-width: 100vw;
    border-radius: 0;
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.4,0,.2,1);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    box-shadow: -18px 0 40px rgba(6,37,68,.18);
    /* Fondo 100% sólido y opaco: el drawer NO debe dejar ver el contenido de
       la página detrás (a diferencia del dropdown original, que sí usaba
       transparencia + blur porque flotaba sobre poco espacio). */
    background: var(--white);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.panel-carrito:not(.oculto) { transform: translateX(0); }
/* Un solo scroll para todo el contenido del drawer (ítems + pasos del
   checkout), en vez de un scroll separado solo para .panel-carrito-cuerpo:
   antes, si el pie (paso 2 con muchos campos, o paso 3) era más alto que
   el espacio disponible, se cortaba sin ninguna forma de desplazarse hasta
   el botón de enviar. El encabezado "Tu carrito" queda fijo arriba con
   position: sticky mientras el resto se desplaza debajo. */
.panel-carrito { overflow-y: auto; }
.panel-carrito-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--white);
}
.panel-carrito-cuerpo { flex: none; overflow-y: visible; max-height: none; }

/* ============ PÁGINAS LEGALES (privacidad / términos / FAQ) ============ */
.legal-documento { max-width: 780px; margin: var(--space-7) auto; padding: var(--space-7); }
.legal-volver {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--surface-2);
    border: 1px solid var(--surface-3);
    color: var(--ink);
    font-size: var(--text-sm);
    font-weight: 700;
    padding: 8px 16px;
    border-radius: var(--r-full);
    cursor: pointer;
    margin-bottom: var(--space-5);
    transition: var(--ease);
}
.legal-volver:hover { background: var(--surface-3); }
.legal-actualizacion { font-size: var(--text-xs); color: var(--ink-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; margin: 0 0 var(--space-3); }
.legal-documento h1 { margin: 0 0 var(--space-4); }
.legal-intro { color: var(--ink-light); font-size: var(--text-md); line-height: 1.6; margin: 0 0 var(--space-6); }
.legal-documento h2 { font-family: var(--font-display); font-size: var(--text-lg); color: var(--brand); margin: var(--space-6) 0 var(--space-3); }
.legal-documento p { color: var(--ink-light); line-height: 1.7; margin: 0 0 var(--space-3); }
.legal-documento ul { color: var(--ink-light); line-height: 1.7; margin: 0 0 var(--space-3); padding-left: 20px; }
.legal-documento li { margin-bottom: 6px; }
.legal-documento a { color: var(--brand); font-weight: 600; }

.faq-container { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-5); }
.faq-item { border: 1px solid var(--surface-3); border-radius: var(--r-md); overflow: hidden; }
.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: var(--white);
    border: none;
    text-align: left;
    font-family: var(--font);
    font-weight: 700;
    font-size: var(--text-sm);
    color: var(--ink);
    cursor: pointer;
}
.faq-question span { font-size: var(--text-lg); color: var(--brand); transition: transform .2s ease; flex-shrink: 0; }
.faq-item.faq-abierta .faq-question span { transform: rotate(45deg); }
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease, padding .25s ease;
    padding: 0 var(--space-5);
    color: var(--ink-light);
    font-size: var(--text-sm);
    line-height: 1.6;
}
.faq-item.faq-abierta .faq-answer { max-height: 240px; padding: 0 var(--space-5) var(--space-4); }

.panel-carrito-legal {
    font-size: 11px;
    color: var(--ink-muted);
    text-align: center;
    line-height: 1.5;
    margin: 8px 0 0;
}
.panel-carrito-legal a { color: var(--ink-muted); text-decoration: underline; }
.panel-carrito-legal a:hover { color: var(--brand); }



.panel-carrito-exito {
    padding: var(--space-6) var(--space-5);
    text-align: center;
}
.panel-carrito-exito-icono { font-size: 48px; margin-bottom: var(--space-3); }
.panel-carrito-exito h4 { font-family: var(--font-display); font-size: var(--text-lg); margin: 0 0 var(--space-2); }
.panel-carrito-exito p { color: var(--ink-light); font-size: var(--text-sm); margin: 0 0 var(--space-2); }
.panel-carrito-exito #panel-carrito-exito-codigo { color: var(--brand); }
.panel-carrito-exito .btn-mkt-primary, .panel-carrito-exito .btn-mkt-secundario { width: 100%; margin-top: var(--space-3); }

/* ============ DESTACADOS DE LA TIENDA (panel distintivo) ============ */
.tienda-destacados-panel {
    background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 10%, var(--white)) 0%, color-mix(in srgb, var(--brand) 6%, var(--white)) 100%);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    border-radius: var(--r-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-6);
    box-shadow: 0 10px 30px -18px color-mix(in srgb, var(--brand) 30%, transparent);
}
.tienda-destacados-header { display: flex; align-items: center; gap: 14px; margin-bottom: var(--space-4); }
.tienda-destacados-icono {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--brand));
    color: var(--white);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}
.tienda-destacados-icono svg { width: 22px; height: 22px; }
.tienda-destacados-eyebrow { display: block; font-size: var(--text-xs); font-weight: 700; color: var(--brand); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
.tienda-destacados-header h2 { margin: 0; font-size: var(--text-lg); }
.tienda-destacados-grid .producto-card-mkt {
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    box-shadow: 0 6px 18px -10px color-mix(in srgb, var(--brand) 35%, transparent);
}

/* ============ DISTRIBUCIÓN — COMPRA AL POR MAYOR (panel público) ============ */
.grid-distribucion {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-5);
}
.tarjeta-mayorista {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    border-radius: var(--r-lg);
    box-shadow: 0 3px 10px rgba(0,0,0,.045);
    border: 1px solid color-mix(in srgb, var(--ink) 5%, transparent);
    transition: var(--ease);
}
.tarjeta-mayorista:hover {
    box-shadow: 0 26px 44px -20px color-mix(in srgb, var(--brand) 38%, transparent), var(--shadow-lg);
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--brand-mid) 30%, transparent);
}
/* Banner de la pestaña "Distribución" dentro de una tienda — mismo
   lenguaje visual que el resto del sitio (degradado suave de marca,
   ícono en círculo), en vez del encabezado de sección genérico y
   plano que tenía antes. */
.banner-distribucion-tienda {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 6%, var(--white)) 0%, color-mix(in srgb, #0f9a7a 5%, var(--white)) 100%);
    border: 1px solid color-mix(in srgb, var(--brand) 12%, transparent);
    border-radius: var(--r-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
}
.banner-distribucion-tienda-icono {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-mid) 100%);
    color: var(--white);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--brand) 45%, transparent);
}
.banner-distribucion-tienda-icono svg { width: 26px; height: 26px; }
.banner-distribucion-tienda-texto { flex: 1; min-width: 200px; }
.banner-distribucion-tienda-texto h2 { margin: 2px 0 4px; }
.banner-distribucion-tienda-texto p { margin: 0; font-size: 13.5px; color: var(--ink-muted); line-height: 1.5; }
.banner-distribucion-tienda-btn { width: auto; flex-shrink: 0; white-space: nowrap; }
@media (max-width: 640px) {
    .banner-distribucion-tienda { padding: var(--space-4); gap: var(--space-3); }
    .banner-distribucion-tienda-icono { width: 42px; height: 42px; }
    .banner-distribucion-tienda-icono svg { width: 20px; height: 20px; }
    .banner-distribucion-tienda-btn { width: 100%; }
}

.tarjeta-mayorista-imagen { aspect-ratio: 4 / 3; background: var(--white); }

/* Título que marca el inicio del catálogo real — discreto en
   escritorio (donde ya es obvio dónde empiezan los productos), más
   presente en celular, después de comprimir todo lo de arriba
   (estadísticas, categorías, tiendas, pestañas). */
.catalogo-titulo-principal { font-size: var(--text-lg); margin: 0 0 var(--space-4); }
@media (max-width: 900px) {
    .catalogo-titulo-principal { font-size: 19px; margin: var(--space-2) 0 var(--space-3); }
}
.tarjeta-mayorista-imagen img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.tarjeta-mayorista:hover .tarjeta-mayorista-imagen img { transform: scale(1.06); }
.tarjeta-mayorista-body { padding: var(--space-4); display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tarjeta-mayorista-body h3 { margin: 0; font-size: var(--text-md); }
.tarjeta-mayorista-disponibilidad {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    color: #0f9a7a;
    background: color-mix(in srgb, #0f9a7a 10%, transparent);
    padding: 3px 10px;
    border-radius: var(--r-full);
}
.tarjeta-mayorista-disponibilidad.agotado { color: var(--error, #C0392B); background: color-mix(in srgb, var(--error, #C0392B) 10%, transparent); }
.tarjeta-mayorista-imagen { position: relative; }
/* Elementos de la tarjeta compacta de mayoreo — ocultos en escritorio,
   se muestran solo en celular (bloque de abajo). */
.tarjeta-mayorista-desde,
.tarjeta-mayorista-ver-escalas { display: none; }
.tarjeta-mayorista-badge-desc {
    position: absolute;
    top: 6px;
    left: 6px;
    background: var(--fv-red, #E4462B);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 6px;
    z-index: 1;
}

/* ============================================================================
   TARJETA DE MAYOREO — COMPACTA (Distribución + pestaña "Mayoreo" de Tienda),
   CELULAR. Misma tarjeta en las dos: la grilla de 8 escalas vive en el detalle.
   ============================================================================ */
@media (max-width: 640px) {
    .tarjeta-mayorista {
        flex-direction: row;
        border: 1px solid var(--fv-border, #E9EEF3);
        border-radius: var(--fv-r-lg, 14px);
        box-shadow: none;
    }
    .tarjeta-mayorista:hover { transform: none; box-shadow: none; border-color: var(--fv-border, #E9EEF3); }
    .tarjeta-mayorista-imagen { flex: 0 0 108px; width: 108px; aspect-ratio: 1 / 1; }
    .tarjeta-mayorista-body { padding: 10px 12px; gap: 3px; justify-content: center; }
    .tarjeta-mayorista-body .producto-card-tienda {
        font-size: 10px; font-weight: 700; letter-spacing: .04em;
        text-transform: uppercase; color: var(--fv-soft, #8494A8);
    }
    .tarjeta-mayorista-body h3 {
        font-size: 13px; font-weight: 700; color: var(--fv-ink, #0B2545); line-height: 1.25;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .tarjeta-mayorista-disponibilidad {
        font-size: 10.5px !important; padding: 0 !important; background: none !important;
        color: var(--fv-green, #12A05C) !important; font-weight: 700;
    }
    .tarjeta-mayorista-disponibilidad.agotado { color: var(--fv-red, #E4462B) !important; }
    .tarjeta-mayorista-desde { display: block; margin: 2px 0 0; font-size: 11px; color: var(--fv-muted, #5A6B80); }
    .tarjeta-mayorista-desde strong { font-size: 15px; font-weight: 800; color: var(--fv-ink, #0B2545); }
    .tarjeta-mayorista-ver-escalas {
        display: inline-flex !important;
        align-items: center; justify-content: center;
        height: 34px; margin-top: 6px; width: 100%;
        border-radius: var(--fv-r-md, 12px);
        border: 1px solid var(--fv-blue, #0B57A4);
        color: var(--fv-blue, #0B57A4); background: #fff;
        font-size: 12px; font-weight: 700;
    }
    .tarjeta-mayorista .grid-escalas-mayorista,
    .tarjeta-mayorista .tarjeta-mayorista-resumen,
    .tarjeta-mayorista .tarjeta-mayorista-elige-titulo,
    .tarjeta-mayorista .tarjeta-mayorista-precio-original,
    .tarjeta-mayorista .btn-agregar-mayorista,
    .tarjeta-mayorista .btn-ver-detalle-mayorista:not(.tarjeta-mayorista-ver-escalas) { display: none !important; }
}

.tabla-precios-mayoristas { width: 100%; border-collapse: collapse; font-size: 12px; margin: 4px 0; }
.tabla-precios-mayoristas th {
    text-align: left;
    color: var(--ink-muted);
    font-weight: 700;
    padding: 7px 6px;
    background: var(--surface-2);
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: .03em;
}
.tabla-precios-mayoristas th:first-child { border-radius: 6px 0 0 6px; }
.tabla-precios-mayoristas th:last-child { border-radius: 0 6px 6px 0; }
.tabla-precios-mayoristas td { padding: 7px 6px; border-bottom: 1px solid color-mix(in srgb, var(--surface-3) 60%, transparent); }
.tabla-precios-mayoristas tr:last-child td { border-bottom: none; }

.tarjeta-mayorista-select-label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--ink); }
.tarjeta-mayorista-select-label select { padding: 8px 10px; border-radius: var(--r-md); border: 1px solid var(--surface-3); font-size: 13px; }

.tarjeta-mayorista-resumen {
    display: flex;
    justify-content: space-between;
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 6%, transparent) 0%, color-mix(in srgb, #0f9a7a 6%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--brand) 10%, transparent);
    border-radius: var(--r-md);
    padding: 10px 12px;
}
.tarjeta-mayorista-resumen div { display: flex; flex-direction: column; gap: 2px; }
.tarjeta-mayorista-resumen span { font-size: 11px; color: var(--ink-muted); }
.tarjeta-mayorista-resumen strong { font-family: var(--font-display); font-size: var(--text-md); color: var(--brand); }
.tarjeta-mayorista-resumen div:last-child strong { color: #0f9a7a; }

.btn-agregar-mayorista {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: auto; /* lo ancla al fondo de la tarjeta, sin importar
                          cuántas filas de precios tenga arriba — así
                          queda alineado con el de las tarjetas vecinas */
}
.btn-agregar-mayorista:disabled { opacity: .5; cursor: not-allowed; }
/* =========================================================
   OPTIMIZACIÓN MÓVIL — el contenido usaba paddings fijos de 32px
   (nav, main, tarjetas, footer) sin ningún ajuste para pantallas
   angostas. En un celular esos paddings se suman unos dentro de
   otros y dejan el contenido real mucho más angosto que la
   pantalla. Esto lo corrige, aprovechando todo el ancho disponible.
   ========================================================= */
@media (max-width: 640px) {
    /* "Compactar más todo": reduce las variables de espaciado grande
       directamente en celular — cualquier sección que use var(--space-6)
       o var(--space-7) sin un ajuste específico propio se compacta sola,
       sin tener que perseguir cada selector uno por uno. Donde sí hay un
       ajuste más específico abajo (o en inicio.css), ese manda igual. */
    :root {
        --space-6: 20px;
        --space-7: 28px;
    }

    .mercado-main { padding: var(--space-4); }
    .nav-sitio-inner { padding: var(--space-3) var(--space-4); }
    /* Barra de confianza (Envíos rápidos / Productos 100% originales /
       Compra segura) en una sola línea, más chica, en vez de partirse
       en varias filas. */
    .barra-confianza-inner {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* Oculta la barra de scroll visible — se desliza igual, pero
           sin la línea gris que ensucia una barra tan finita. */
        scrollbar-width: none;
        /* Desvanecido en el borde derecho: sin esto, "Compra segura"
           se ve cortado a la mitad contra el borde de la pantalla, sin
           ninguna pista de que la fila se puede deslizar — se veía como
           un bug de diseño, no como contenido deslizable. */
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%);
        mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%);
    }
    .barra-confianza-inner::-webkit-scrollbar { display: none; }
    .barra-confianza-lista {
        flex-wrap: nowrap;
        gap: var(--space-3);
        font-size: 10px;
        /* CLAVE: sin min-width:0, un hijo flex se niega a encogerse
           más allá de su contenido — la lista desbordaba el contenedor
           (444px de ancho real en una pantalla de 375px) en vez de
           deslizarse DENTRO de él, cortando "Compra segura" contra el
           borde de la pantalla. Verificado con navegador real. */
        min-width: 0;
        flex-shrink: 1;
    }
    .barra-confianza-lista li { gap: 4px; }
    .barra-confianza-lista .ini-ico { width: 11px; height: 11px; }
    .footer-mercado { padding: var(--space-5) var(--space-4); }
    .barra-confianza-inner { padding: 7px var(--space-4); }
    .hero-mercado { padding: var(--space-5) var(--space-4); }
    .card { padding: var(--space-4); margin-bottom: var(--space-3); }
    .ini-producto-modal-imagenes,
    .ini-producto-modal-info { padding: var(--space-4); }

    /* Hero simplificado en celular — lo primero que se ve al entrar al
       Marketplace ahora son las tiendas, categorías y productos, no un
       banner de presentación. El título/subtítulo/botones del hero se
       ocultan (el CTA de "Quiero vender" se reubica en una franja
       propia, compacta, justo debajo — ver .franja-quiero-vender). */
    .hero-mercado-texto { display: none; }
    .hero-mercado { padding: 0; }
    .hero-mercado-wrap { padding: 0; margin-bottom: var(--space-3); overflow: visible; }
    .hero-mercado-wrap::before,
    .hero-mercado-wrap::after { display: none; }

    /* Se quita del todo en celular — nunca se terminó de ver bien ahí
       (quedaba apretado y no aportaba mucho tan arriba de la página). */
    .hero-mercado-stats { display: none; }
    .stat-card strong { font-size: 13px; }
    .stat-card span { font-size: 9.5px; line-height: 1.2; }

    /* Banner de oferta — reemplaza al hero institucional en celular,
       con el estilo de una app de compras real: oscuro, directo, un
       solo mensaje y un solo botón. En escritorio se queda oculto
       (ver regla fuera de este bloque), el hero de siempre se sigue
       viendo ahí sin ningún cambio. */
    /* El contenedor del hero deja de ser una "tarjeta" en celular — sin
       borde, sombra ni fondo claro detrás del banner oscuro (era la
       "franja blanca" que asomaba abajo del recuadro azul). */
    .hero-mercado-wrap {
        border: none !important;
        box-shadow: none !important;
        background: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible;
    }
    .hero-mercado { display: none !important; }

    .hero-banner-oferta-movil {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 7px;
        background: linear-gradient(135deg, var(--fv-ink, #0B2545) 0%, #0F2D52 100%);
        border-radius: var(--fv-r-xl, 18px);
        padding: 20px var(--fv-s-4, 16px);
        margin: 0 0 var(--fv-s-5, 22px);
        text-decoration: none;
        box-shadow: none;
    }
    .hero-banner-oferta-kicker {
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .09em;
        text-transform: uppercase;
        color: var(--fv-teal, #4CE0D0);
    }
    .hero-banner-oferta-titulo {
        font-family: var(--fv-font);
        font-size: 21px;
        font-weight: 800;
        color: #fff;
        line-height: 1.25;
        margin: 2px 0 8px;
    }
    .hero-banner-oferta-cta {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 36px;
        background: #fff;
        color: var(--fv-ink, #0B2545);
        font-size: 13px;
        font-weight: 700;
        padding: 0 16px;
        border-radius: var(--fv-r-pill, 999px);
    }
    .hero-banner-oferta-cta svg { width: 15px; height: 15px; }

    /* Categorías como íconos circulares — antes eran píldoras
       rectangulares con ícono+texto lado a lado (bien en escritorio,
       pero en celular se ven mejor como accesos rápidos tipo app,
       ícono arriba y nombre abajo, en una sola fila deslizable). */
    .fila-categorias-hero { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 14px; padding: 2px 2px 4px; }
    .categoria-hero-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        flex: 0 0 64px;
        background: none;
        border: none;
        box-shadow: none;
        padding: 0;
        text-align: center;
    }
    .categoria-hero-item > .categoria-hero-ico {
        grid-row: auto;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--accent-dim);
        font-size: 22px;
    }
    .categoria-hero-item > span:not(.categoria-hero-ico):not(.categoria-hero-cantidad) {
        grid-column: auto;
        font-size: 10.5px;
        line-height: 1.2;
        white-space: normal;
    }
    .categoria-hero-cantidad { display: none; }
    .categoria-hero-item:hover { transform: none; box-shadow: none; }

    /* Franja de "Quiero vender" — compacta, pero con buen contraste de
       color para que siga llamando la atención pese a ocupar mucho
       menos espacio que el botón grande del hero (que se oculta en
       celular). Va justo arriba de todo, antes que cualquier otra
       cosa, para que sea de lo primero que se note al entrar. */
    /* El logo del encabezado está a la izquierda — esta franja va del
       lado contrario (derecha), como una píldora compacta, en vez de
       ocupar todo el ancho como antes. */
    .franja-quiero-vender {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: fit-content;
        margin: 0 var(--space-4) var(--space-3) auto;
        padding: 9px 14px;
        border-radius: var(--r-full);
        background: linear-gradient(135deg, var(--brand) 0%, var(--brand-mid) 100%);
        color: var(--white);
        text-decoration: none;
        font-family: var(--font);
        font-weight: 700;
        font-size: 12px;
        white-space: nowrap;
        box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--brand) 55%, transparent);
    }
    .franja-quiero-vender-flecha { font-size: 14px; flex-shrink: 0; }

    /* El carrusel automático de "Tiendas destacadas"/"Nuestras marcas" es
       puramente decorativo — en celular queda como fila que se desliza
       con el dedo, sin la animación continua. Aplica a "Tiendas
       destacadas" (esta clase); "Nuestras marcas" usa otra clase aparte
       (.ini-marcas-track, en inicio.css) y NO se toca — sigue con su
       animación tal cual.
       Nota: .tiendas-viewport tenía overflow:hidden (para la máscara de
       difuminado en los extremos, pensada para la animación automática)
       — eso bloqueaba el scroll manual aunque el de adentro sí lo
       permitiera. En celular se quita esa máscara y se deja scrollear. */
    .tiendas-viewport:has(.fila-tiendas-destacadas.animado) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        -webkit-mask-image: none;
        mask-image: none;
    }
    .fila-tiendas-destacadas.animado {
        animation: none;
        width: max-content;
    }

    /* "Conoce nuestras tiendas destacadas" ya no se muestra suelta en
       celular — ahora vive dentro del panel de Filtros (a pedido, para
       que todo lo de "elegir dónde/qué ver" esté en un solo lugar
       desplegable, no repartido en varias secciones sueltas). */
    .seccion-tiendas-destacadas { display: none; }

    /* Filtros del catálogo (Categorías, Rango de precios, Ubicación,
       Solo promoción) — antes eran 4 tarjetas grandes apiladas, cada una
       con su propio padding/sombra/margen completo. En celular se
       compactan: menos aire interno, categorías en fila horizontal con
       scroll (en vez de una lista larga hacia abajo) para llegar más
       rápido a los productos. */
    /* El panel de filtros (#catalogo-sidebar) usa z-index: 1400 para
       quedar por encima de todo — pero .mercado-main (el <main> que lo
       contiene) tiene su propio "position: relative; z-index: 1", y es
       HERMANO del header (.nav-sitio, z-index 40) y de la barra
       inferior fija (.barra-inferior-movil, z-index 40), no su
       ancestro. Eso crea un contexto de apilamiento propio: aunque el
       panel de filtros tenga z-index 1400 POR DENTRO de ese contexto,
       el contexto completo (.mercado-main) se compara con z-index 1
       contra el header y la barra inferior — y pierde, así que el
       panel terminaba renderizándose debajo de ambos.

       OJO: esto solo debe pasar MIENTRAS el panel de filtros está
       abierto — si .mercado-main quedara con z-index 45 todo el
       tiempo, terminaría tapando la barra inferior en cualquier otra
       situación (cualquier tarjeta de producto que se superponga
       visualmente a esa franja). Por eso el z-index alto se activa
       solo con la clase .filtros-abiertos, que mercado.js agrega/quita
       al abrir/cerrar el panel — el resto del tiempo .mercado-main se
       queda en su z-index normal (1), y la barra inferior (40) manda.
    */
    .mercado-main.filtros-abiertos { z-index: 45; }

    /* Los widgets flotantes de accesibilidad y WhatsApp quedaban
       visibles (aunque atenuados) por debajo del fondo oscuro del
       panel de filtros, en vez de ocultarse del todo — con opacidad
       .5 en el fondo, se seguían viendo transparentados encima de
       todo. Se ocultan del todo mientras los filtros están abiertos,
       misma clase .filtros-abiertos de arriba. */
    body:has(.mercado-main.filtros-abiertos) #a11y-btn,
    body:has(.mercado-main.filtros-abiertos) #a11y-panel,
    body:has(.mercado-main.filtros-abiertos) .whatsapp-btn {
        display: none !important;
    }

    .catalogo-buscador { padding: var(--space-3); gap: var(--space-2); flex-wrap: wrap; }
    /* El buscador de esta barra se oculta en celular — ya está disponible
       desde el botón "Buscar" de la barra inferior fija (ver
       iniciarBarraInferiorMovil en farmavitae-utils.js), así que tenerlo
       acá también era redundante. "Filtros" y "Más relevantes" se
       quedan, son los únicos controles que no están repetidos abajo. */
    .catalogo-buscador input[type="search"] { display: none; }
    .catalogo-buscador select { min-width: 0; flex: 1; font-size: 14px; padding: 12px; }
    .filtro-bloque { padding: var(--space-3); margin-bottom: var(--space-2); box-shadow: none; }
    .filtro-bloque h3 { font-size: var(--text-xs); margin-bottom: 6px; }
    .lista-filtro-radio {
        flex-direction: row;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 6px;
        padding-bottom: 2px;
        /* Sin esto, una fila que sí se puede deslizar horizontalmente
           se ve idéntica a una que simplemente corta el texto — nada
           le avisaba a la persona que hay más opciones a la derecha. */
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent 100%);
        mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent 100%);
    }
    .lista-filtro-radio label {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 6px 12px;
        border-radius: var(--r-full);
        background: var(--surface-2);
        font-size: 12px;
    }
    .lista-filtro-radio label:has(input:checked) { background: var(--brand); color: var(--white); }
    .fila-precio input { padding: 8px 10px; font-size: var(--text-sm); }
    .btn-precio-aplicar { margin-top: var(--space-2); padding: 8px; font-size: var(--text-sm); }
}
@media (max-width: 400px) {
    .mercado-main { padding: var(--space-3); }
    .nav-sitio-inner { padding: var(--space-3); }
}

/* =========================================================
   PANELES PLEGABLES (.mkt-colapsable) — Explora por categoría,
   Tiendas destacadas, Filtros del Marketplace, ¿Por qué Farmavitae?,
   Sobre Farmavitae, Testimonios. Empiezan abiertos (atributo "open" en
   el HTML); un script en cada página los cierra solo en celular al
   cargar. El usuario los abre/cierra tocando el título — es un
   <details>/<summary> nativo, sin necesitar JS para el toggle en sí.

   La flechita va con position:absolute (no flex) a propósito: así el
   contenido de adentro (un <h2> simple, o un .ini-seccion-cabecera
   centrado con su eyebrow) conserva su propia alineación normal —
   antes, con display:flex + justify-content:space-between, cualquier
   título centrado quedaba empujado a la izquierda por el hueco que
   dejaba la flecha a la derecha.
   ========================================================= */
/* =========================================================
   PANELES PLEGABLES (.mkt-colapsable) — SOLO en celular. En
   computador/web se ven y se comportan como contenido normal: sin
   tarjeta, sin flechita, sin poder cerrarse (pointer-events:none
   desactiva el toggle nativo de <summary>, que si no seguiría
   funcionando con el mouse aunque no se viera la flecha).

   Empiezan abiertos (atributo "open" en el HTML); un script en cada
   página los cierra solo en celular al cargar.

   La flechita va con position:absolute (no flex) a propósito: así el
   contenido de adentro (un <h2> simple, o un .ini-seccion-cabecera
   centrado con su eyebrow) conserva su propia alineación normal.
   ========================================================= */
.mkt-colapsable summary {
    list-style: none;
    position: relative;
}
.mkt-colapsable summary::-webkit-details-marker { display: none; }
.mkt-colapsable summary .ini-seccion-cabecera,
.mkt-colapsable summary h2 { margin: 0; }
.filtro-bloque:first-of-type,
.mkt-colapsable > summary + * { margin-top: var(--space-3); }

/* "Limpiar todos los filtros" — antes vivía hasta abajo del todo,
   después de la lista de tiendas (que puede ser larga), muy lejos de
   la mano. Ahora es lo primero que se ve al abrir el panel, como una
   pastilla pequeña alineada a la derecha. */
.btn-limpiar-filtros-arriba {
    display: block;
    margin: var(--space-3) 0 var(--space-4) auto;
    padding: 5px 12px;
    border-radius: var(--r-full);
    background: var(--surface-2);
    font-size: 12px;
}
.btn-limpiar-filtros-arriba:hover { background: color-mix(in srgb, var(--brand) 8%, var(--surface-2)); }

/* Desde aquí para abajo, todo lo visual/interactivo del plegable es
   EXCLUSIVO de celular. */
@media (min-width: 641px) {
    .mkt-colapsable summary {
        cursor: default;
        pointer-events: none; /* anula el toggle nativo con el mouse */
    }
}

@media (max-width: 640px) {
    .mkt-colapsable summary {
        cursor: pointer;
        padding: 14px 40px 14px 16px;
        background: var(--white);
        border: 1px solid var(--surface-3);
        border-radius: var(--r-lg);
        box-shadow: 0 2px 10px -6px color-mix(in srgb, var(--brand) 30%, transparent);
        transition: box-shadow .2s ease, border-color .2s ease;
        max-width: 100%;
        box-sizing: border-box;
    }
    .mkt-colapsable summary:hover { box-shadow: 0 4px 16px -6px color-mix(in srgb, var(--brand) 35%, transparent); }
    .mkt-colapsable summary::after {
        content: "";
        position: absolute;
        right: 18px;
        top: 50%;
        width: 9px; height: 9px;
        border-right: 2px solid var(--brand);
        border-bottom: 2px solid var(--brand);
        transform: translateY(-65%) rotate(45deg);
        transition: transform .2s ease;
    }
    .mkt-colapsable[open] summary {
        border-radius: var(--r-lg) var(--r-lg) 0 0;
        border-bottom-color: transparent;
        border-color: color-mix(in srgb, var(--brand) 18%, var(--surface-3));
    }
    .mkt-colapsable[open] summary::after { transform: translateY(-35%) rotate(-135deg); }
    .mkt-colapsable summary h2 { font-size: 1rem; }
    .mkt-colapsable > summary + * { padding: var(--space-1) 2px 0; }
    .filtro-bloque { border-radius: var(--r-md); }

    .catalogo-sidebar,
    .catalogo-buscador,
    .filtro-bloque,
    .mkt-colapsable {
        max-width: 100%;
        box-sizing: border-box;
    }
    #filtro-ubicacion,
    .fila-precio,
    .fila-precio input {
        max-width: 100%;
    }
}
/* ============ IMPACTO SOCIAL — widget del checkout ============ */
.panel-carrito-impacto-social { margin: var(--space-4) 0; }
.impacto-social-caja {
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 7%, var(--white)) 0%, color-mix(in srgb, var(--accent) 10%, var(--white)) 100%);
    border: 1px solid color-mix(in srgb, var(--brand) 15%, transparent);
    border-radius: var(--r-lg);
    padding: var(--space-4);
}
.impacto-social-titulo { margin: 0 0 4px; font-weight: 800; font-size: 14.5px; color: var(--ink); }
.impacto-social-mensaje { margin: 0 0 12px; font-size: 12.5px; color: var(--ink-muted); line-height: 1.5; }
.impacto-social-cifras {
    background: var(--white);
    border-radius: var(--r-md);
    padding: 10px 12px;
    margin-bottom: 12px;
}
.impacto-social-cifra-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 12.5px;
    color: var(--ink);
}
.impacto-social-cifra-fila + .impacto-social-cifra-fila { border-top: 1px solid var(--surface-2); }
.impacto-social-cifra-fila em { font-style: normal; color: var(--ink-muted); font-size: 11px; }
.impacto-social-cifra-fila strong { font-size: 13px; }
.impacto-social-cifra-destacada strong { color: var(--brand); font-size: 15px; }
.impacto-social-sin-costo {
    display: block;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--surface-2);
    font-weight: 600;
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--success, #0F7A7A) !important;
}
.impacto-social-fundaciones { display: flex; flex-direction: column; gap: 10px; }
.impacto-social-fundacion-unica {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--white);
    border-radius: var(--r-md);
    padding: 10px 12px;
    font-size: 13px;
    color: var(--ink);
}
.impacto-social-fundacion-unica img, .impacto-social-fundacion-unica .impacto-social-fundacion-sinlogo {
    width: 34px; height: 34px;
    border-radius: 9px;
    object-fit: cover;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-dim);
    font-size: 15px;
}
.impacto-social-elige-titulo { margin: 2px 0 10px; font-size: 12.5px; font-weight: 700; color: var(--ink); }
/* Vista previa de la fundación elegida — mismo estilo visual que
   ".impacto-social-fundacion-unica" (logo + nombre), pero para cuando
   SÍ hay que elegir entre varias. Se actualiza sola al cambiar el
   select de abajo. */
.impacto-social-fundacion-vista-previa {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--white);
    border-radius: var(--r-md);
    padding: 10px 12px;
    font-size: 13px;
    color: var(--ink);
    margin-bottom: 8px;
}
.impacto-social-fundacion-descripcion {
    margin: 0;
    font-size: 12px;
    color: var(--ink-muted);
    line-height: 1.5;
}
.impacto-social-fundacion-vista-previa img, .impacto-social-fundacion-vista-previa .impacto-social-fundacion-sinlogo {
    width: 34px; height: 34px;
    border-radius: 9px;
    object-fit: cover;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-dim);
    font-size: 15px;
}
/* El selector — antes esto era una tarjeta por fundación, todas
   visibles a la vez — con muchas fundaciones (10+) se volvía una
   lista larguísima dentro del carrito. Un <select> nativo se comporta
   bien sin importar cuántas opciones tenga, y sigue siendo accesible
   por teclado/lector de pantalla sin nada extra. */
.impacto-social-fundacion-select {
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--r-md);
    border: 1.5px solid var(--surface-3);
    background: var(--white);
    font-size: 13.5px;
    color: var(--ink);
    font-family: inherit;
    cursor: pointer;
}
.impacto-social-fundacion-select:focus { outline: none; border-color: var(--brand); }
.impacto-social-fundacion-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--white);
    border: 1.5px solid var(--surface-3);
    border-radius: 14px;
    padding: 12px;
    cursor: pointer;
    transition: var(--ease);
    position: relative;
}
.impacto-social-fundacion-card:hover {
    border-color: color-mix(in srgb, var(--brand) 40%, transparent);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -8px rgba(10,30,60,.18);
}
.impacto-social-fundacion-card.seleccionada {
    border-color: var(--brand);
    background: linear-gradient(135deg, var(--accent-dim) 0%, color-mix(in srgb, var(--accent) 12%, var(--white)) 100%);
    box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--brand) 35%, transparent);
}
/* El radio nativo se oculta (visualmente) pero sigue funcionando —
   el check personalizado a la derecha es el que se ve, más acorde al
   resto del diseño que el círculo genérico del navegador. */
.impacto-social-fundacion-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px; height: 1px;
    pointer-events: none;
}
.impacto-social-fundacion-card img {
    width: 48px; height: 48px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 2px 8px -2px rgba(10,30,60,.2);
}
.impacto-social-fundacion-sinlogo {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--accent-dim), color-mix(in srgb, var(--accent) 20%, var(--white)));
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; flex-shrink: 0;
}
.impacto-social-fundacion-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.impacto-social-fundacion-info strong { font-size: 13.5px; color: var(--ink); }
.impacto-social-fundacion-info span { font-size: 11.5px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.impacto-social-fundacion-check {
    width: 24px; height: 24px;
    border-radius: 50%;
    border: 2px solid var(--surface-3);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--ease);
}
.impacto-social-fundacion-card.seleccionada .impacto-social-fundacion-check {
    border-color: var(--brand);
    background: var(--brand);
}
.impacto-social-fundacion-card.seleccionada .impacto-social-fundacion-check::after {
    content: '✓';
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}

/* ============ Tarjeta de descripción al pasar el cursor (solo escritorio) ============ */
/* Mismo patrón visual que otras tarjetas flotantes del sitio — se
   apoya en :hover real, que en pantallas táctiles no existe de forma
   persistente, así que naturalmente solo se activa en computadora. */
[data-tooltip] { position: relative; cursor: help; }
.impacto-social-info-ico { color: var(--ink-muted); font-size: 13px; margin-left: 4px; flex-shrink: 0; }
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    width: max-content;
    max-width: 260px;
    background: var(--ink);
    color: #fff;
    font-size: 12px;
    line-height: 1.5;
    padding: 10px 12px;
    border-radius: 10px;
    box-shadow: 0 10px 24px -8px rgba(0,0,0,.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
    z-index: 40;
}
[data-tooltip]::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--ink);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
    z-index: 40;
}
[data-tooltip]:hover::after, [data-tooltip]:hover::before { opacity: 1; }
[data-tooltip]:hover::after { transform: translateX(-50%) translateY(0); }
@media (max-width: 640px) {
    /* Sin hover persistente en táctil — se oculta la tarjeta flotante
       por completo (mostrarla al tocar y no poder cerrarla con el
       dedo sería peor experiencia que no mostrarla). */
    [data-tooltip]::after, [data-tooltip]::before { display: none; }
}

/* ============ "?" de desglose junto a "Total a pagar" (carrito, paso 3) ============
   A diferencia de [data-tooltip] de arriba, este SÍ funciona en celular —
   se abre/cierra con un toque (no con :hover, que ahí no existe de forma
   persistente), porque el checkout se usa muchísimo desde el teléfono. */
.panel-carrito-total-pagar-fila { position: relative; }
.panel-carrito-desglose-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    margin-left: 5px;
    border-radius: 50%;
    border: 1px solid var(--ink-muted, #6B7A90);
    background: none;
    color: var(--ink-muted, #6B7A90);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    vertical-align: middle;
    padding: 0;
}
.panel-carrito-desglose-btn:hover,
.panel-carrito-desglose-btn[aria-expanded="true"] {
    border-color: var(--brand);
    color: var(--brand);
}
.panel-carrito-desglose-popover {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    width: 250px;
    max-width: calc(100vw - 48px);
    background: #fff;
    border: 1px solid var(--surface-3);
    border-radius: var(--r-md);
    box-shadow: 0 14px 32px -10px rgba(10,30,60,.3);
    padding: 12px 14px;
    z-index: 50;
}
.panel-carrito-desglose-fila { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--ink-light); padding: 3px 0; }
.panel-carrito-desglose-fila strong { font-family: var(--font-display); color: var(--ink); font-weight: 700; font-size: 12.5px; }
.panel-carrito-desglose-fila-total { border-top: 1px dashed var(--surface-3); margin-top: 4px; padding-top: 6px; }
.panel-carrito-desglose-fila-total span, .panel-carrito-desglose-fila-total strong { color: var(--ink); font-weight: 800; }
.panel-carrito-desglose-nota { font-size: 11.5px; color: var(--ink-muted); margin: 8px 0 0; line-height: 1.45; }
.panel-carrito-desglose-nota strong { color: var(--ink); }

/* ============ IMPACTO SOCIAL — carrusel de fotos + lightbox (página dedicada) ============ */
.impacto-social-carrusel-fotos {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin-top: 10px;
    padding-bottom: 4px;
    scrollbar-width: thin;
}
.impacto-social-foto-item {
    flex: 0 0 84px;
    width: 84px;
    height: 84px;
    object-fit: cover;
    border-radius: 10px;
    cursor: pointer;
    transition: var(--ease);
}
.impacto-social-foto-item:hover { transform: scale(1.05); box-shadow: 0 6px 16px -6px rgba(10,30,60,.3); }

.impacto-social-lightbox {
    position: fixed;
    inset: 0;
    /* Antes en 2000 — en teoría ya le ganaba al header (nav-sitio,
       z-index:40), pero en la práctica el header se seguía viendo por
       encima del fondo oscuro. Se sube bien por encima de cualquier
       otro elemento del sitio para que gane siempre, sin ambigüedad. */
    z-index: 9999;
    background: rgba(10,20,35,.92);
    display: flex;
    align-items: center;
    justify-content: center;
}
.impacto-social-lightbox-cuerpo { max-width: min(90vw, 640px); text-align: center; }
.impacto-social-lightbox-cuerpo img { max-width: 100%; max-height: 70vh; border-radius: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.4); }
.impacto-social-lightbox-titulo { color: #fff; font-weight: 800; font-size: 16px; margin: 14px 0 4px; }
.impacto-social-lightbox-desc { color: rgba(255,255,255,.8); font-size: 13.5px; margin: 0; line-height: 1.5; }
.impacto-social-lightbox-cerrar {
    position: absolute;
    top: 18px; right: 18px;
    background: rgba(255,255,255,.12);
    border: none;
    color: #fff;
    width: 38px; height: 38px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
}
.impacto-social-lightbox-flecha {
    background: rgba(255,255,255,.12);
    border: none;
    color: #fff;
    width: 46px; height: 46px;
    border-radius: 50%;
    font-size: 26px;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0 14px;
}
@media (max-width: 640px) {
    .impacto-social-lightbox-flecha { width: 38px; height: 38px; font-size: 20px; margin: 0 6px; }
    .impacto-social-lightbox-cuerpo { max-width: calc(100vw - 100px); }
}

/* ============ TÍTULO COMPACTO SOLO CELULAR (Distribución, Fábrica con Nosotros) ============ */
/* Reemplaza al título/subtítulo del hero, que se oculta en celular
   (.hero-mercado-texto) — sin este reemplazo, esas 2 páginas quedaban
   sin ningún encabezado en celular, arrancando directo con la
   ilustración decorativa, sin contexto de qué página es. */
.titulo-movil-compacto { display: none; }
@media (max-width: 640px) {
    .titulo-movil-compacto {
        display: flex;
        align-items: center;
        gap: 12px;
        background: linear-gradient(120deg, var(--brand) 0%, var(--brand-mid) 100%);
        color: #fff;
        border-radius: 16px;
        padding: 14px 16px;
        margin: var(--space-3) 0 0;
    }
    .titulo-movil-compacto-ico { font-size: 26px; flex-shrink: 0; }
    .titulo-movil-compacto strong { display: block; font-size: 15.5px; font-family: var(--font-display); }
    .titulo-movil-compacto span { display: block; font-size: 11.5px; opacity: .85; margin-top: 1px; }
}

/* ============ IMPACTO SOCIAL — página dedicada, diseño propio ============ */
.impacto-social-hero-visual {
    background: var(--white);
    border: 1px solid var(--surface-3);
    border-radius: var(--r-lg);
    padding: var(--space-5);
    box-shadow: 0 16px 40px -16px color-mix(in srgb, var(--brand) 25%, transparent);
    position: relative;
    overflow: hidden;
}
.impacto-social-hero-visual::before {
    content: "";
    position: absolute;
    top: -40%;
    right: -30%;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, color-mix(in srgb, #FF6B6B 22%, transparent), transparent 70%);
    pointer-events: none;
}
.impacto-social-hero-icono { width: 100%; max-width: 130px; margin: 0 auto var(--space-4); display: block; position: relative; }
.impacto-social-hero-stats { display: flex; flex-direction: column; gap: var(--space-2); position: relative; }
.impacto-social-hero-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface-2);
    border-radius: var(--r-md);
    padding: 12px var(--space-3);
    transition: background .2s ease;
}
.impacto-social-hero-stat:hover { background: var(--accent-dim); }
.impacto-social-hero-stat strong {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 800;
    color: var(--white);
    background: var(--brand);
    flex-shrink: 0;
    min-width: 42px;
    height: 42px;
    padding: 0 6px;
    border-radius: var(--r-full);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.impacto-social-hero-stat span { font-size: 13px; color: var(--ink); font-weight: 600; line-height: 1.35; }
@media (max-width: 860px) { .impacto-social-hero-visual { margin-top: var(--space-4); } }

/* "¿Cómo funciona?" — tarjeta con pasos numerados en vez de un
   párrafo suelto, más ordenado y fácil de escanear de un vistazo. */
.impacto-social-como-funciona {
    max-width: 900px;
    margin: 0 auto var(--space-7);
    padding: var(--space-6) var(--space-5);
    background: var(--white);
    border-radius: 22px;
    border: 1px solid #E9EEF3;
    box-shadow: 0 30px 60px -35px rgba(10,30,60,.25);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.impacto-social-como-funciona::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: linear-gradient(90deg, #E4462B, #4CE0D0 55%, #0B57A4);
}
.impacto-social-como-funciona-eyebrow {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #0B57A4;
    background: #EAF1FA;
    padding: 5px 14px;
    border-radius: var(--r-full);
    margin-bottom: 10px;
}
.impacto-social-como-funciona h2 { margin: 0 0 var(--space-5); font-size: 1.5rem; }
.impacto-social-pasos {
    display: flex;
    align-items: stretch;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
    text-align: left;
}
.impacto-social-paso {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #F8FAFC;
    border: 1px solid #EEF1F5;
    border-radius: 16px;
    padding: var(--space-4);
}
.impacto-social-paso-flecha {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #C3CEDB;
    font-size: 20px;
    flex: 0 0 auto;
}
.impacto-social-paso-num {
    width: 46px; height: 46px;
    border-radius: 14px;
    background: linear-gradient(135deg, #0B57A4, #073E76);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 10px 18px -8px rgba(11,87,164,.55);
}
.impacto-social-paso-num svg { width: 22px; height: 22px; }
.impacto-social-paso strong { display: block; font-size: 14.5px; font-weight: 800; color: var(--ink); margin-bottom: 3px; }
.impacto-social-paso p { margin: 0; font-size: 13px; color: var(--ink-muted); line-height: 1.55; }
.impacto-social-como-funciona .btn-mkt-primary { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 720px) {
    .impacto-social-pasos { flex-direction: column; }
    .impacto-social-paso-flecha { transform: rotate(90deg); padding: 2px 0; }
}

/* ============================================================
   "FARMAVITAE APOYA A..." — vitrina de fundaciones.
   Vive acá (no en inicio.css) A PROPÓSITO: la usan TANTO Inicio COMO
   la página dedicada de Impacto Social, y mercado.css es el único
   archivo que ambas cargan en común. Antes vivía en inicio.css, que
   impacto-social.html nunca incluye — por eso el logo de la fundación
   se veía enorme ahí (sin ninguna regla de tamaño aplicándose).
   ============================================================ */
.seccion-impacto-social-inicio {
    max-width: var(--ancho-max, 1200px);
    margin: 0 auto var(--space-6);
    padding: var(--space-6) var(--space-5);
    background: linear-gradient(135deg, color-mix(in srgb, #FF6B6B 5%, var(--white)) 0%, color-mix(in srgb, var(--accent) 7%, var(--white)) 60%, var(--white) 100%);
    border-radius: var(--r-lg);
    border: 1px solid color-mix(in srgb, var(--brand) 8%, transparent);
}
@media (max-width: 640px) {
    .seccion-impacto-social-inicio { padding: var(--space-5) var(--space-4); border-radius: 18px; }
}
.btn-impacto-social-vertodas {
    display: inline-block;
    background: linear-gradient(120deg, #FF6B6B, var(--brand));
    color: #fff;
    font-weight: 700;
    font-size: 13.5px;
    text-decoration: none;
    padding: 11px 22px;
    border-radius: var(--r-full);
    box-shadow: 0 8px 20px -8px rgba(255,107,107,.45);
    transition: var(--ease);
}
.btn-impacto-social-vertodas:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px -8px rgba(255,107,107,.55);
}
.fila-impacto-social-fundaciones {
    display: flex;
    /* Centrado cuando caben todas las tarjetas sin necesitar scroll —
       si son muchas y sí hay que deslizar, el navegador ignora
       "center" solo en el eje con overflow, así que no rompe nada. */
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-4);
}
/* A partir de 4 fundaciones ya no conviene que se envuelvan en varias
   filas — se convierte en un carrusel horizontal deslizable, con las
   tarjetas centradas si de casualidad caben todas igual. */
.fila-impacto-social-fundaciones.modo-carrusel {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%);
}
.fila-impacto-social-fundaciones.modo-carrusel .impacto-social-inicio-card {
    flex: 0 0 260px;
}
.impacto-social-inicio-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 260px;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--white) 97%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand) 7%, transparent);
    border-radius: var(--r-lg);
    box-shadow: 0 14px 32px -18px color-mix(in srgb, var(--brand) 35%, transparent), var(--shadow-md);
    padding-bottom: var(--space-5);
    transition: var(--ease);
    overflow: hidden;
}
.impacto-social-inicio-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 26px 46px -20px color-mix(in srgb, var(--brand) 42%, transparent), var(--shadow-lg);
    border-color: color-mix(in srgb, var(--brand-mid) 35%, transparent);
}
/* Franja de encabezado con degradado — antes la tarjeta arrancaba
   directo con el logo sobre fondo blanco, se sentía muy vacía. Ahora
   tiene una zona de color arriba, con el logo superpuesto tipo
   insignia — el mismo patrón que ya se ve bien en otras tarjetas del
   sitio (marcas, tiendas). */
.impacto-social-inicio-franja {
    height: 64px;
    background: linear-gradient(120deg, #FF6B6B, var(--accent) 55%, var(--brand));
    position: relative;
    flex-shrink: 0;
}
.impacto-social-inicio-franja-corazon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    opacity: .35;
}
/* Antes esta regla (con !important) alcanzaba a CUALQUIER <img> de la
   tarjeta, incluidas las fotos del carrusel en la página dedicada de
   Impacto Social — las forzaba a 64x64 aunque debían verse a 84x84.
   Ahora solo apunta al logo, con su propia clase. */
.impacto-social-inicio-logo {
    width: 68px !important; height: 68px !important;
    border-radius: 18px;
    object-fit: cover;
    box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--brand) 30%, transparent);
    display: block;
    flex-shrink: 0;
    background: var(--white);
    border: 3px solid var(--white);
    margin: -34px var(--space-5) var(--space-3);
    position: relative;
    z-index: 1;
}
.impacto-social-inicio-sinlogo {
    width: 68px; height: 68px;
    border-radius: 18px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 26%, var(--white)), color-mix(in srgb, var(--brand) 16%, var(--white)));
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
    box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--brand) 20%, transparent);
    flex-shrink: 0;
    border: 3px solid var(--white);
}
.impacto-social-inicio-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 0 var(--space-5); }
.impacto-social-inicio-info strong { font-size: 16px; color: var(--ink); font-family: var(--font-display); }
.impacto-social-inicio-programa { font-size: 12px; color: var(--brand); font-weight: 600; }
.impacto-social-inicio-programa-generico { color: var(--ink-muted); }
.impacto-social-inicio-finalizado { font-size: 11px; color: var(--ink-muted); font-weight: 700; background: var(--surface-2); display: inline-block; padding: 3px 9px; border-radius: var(--r-full); width: fit-content; }
.impacto-social-inicio-info p { font-size: 13px; color: var(--ink-muted); margin: 2px 0 0; line-height: 1.55; }
.impacto-social-inicio-cta {
    display: inline-block;
    margin: var(--space-3) var(--space-5) 0;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--brand);
    text-decoration: none;
}
.impacto-social-inicio-cta:hover { text-decoration: underline; }
.impacto-social-carrusel-fotos { margin-left: var(--space-5); margin-right: var(--space-5); }

/* ============ REFUERZO — recorte de 2 líneas en el título de producto ============ */
/* Había 2 reglas ".producto-card-nombre" en este mismo archivo con
   valores de "display" contradictorios (una decía "block", la otra
   "-webkit-box") — verificado con el navegador real que el resultado
   final terminaba en un "display" que rompe el recorte de 2 líneas
   por completo. En vez de perseguir el orden exacto del cascade, esta
   regla se pone al FINAL del archivo con !important, garantizando que
   el recorte de 2 líneas limpias (con "...") siempre gane — antes,
   sin el recorte funcionando, el texto se cortaba a mitad de una
   tercera línea en vez de terminar en un punto limpio. */
.producto-card-nombre {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* =========================================================
   ÁREAS TÁCTILES — CELULAR
   ---------------------------------------------------------
   Auditoría con navegador real (viewport 375px) encontró 18
   elementos tocables por debajo del mínimo recomendado de 44x44px,
   varios muy por debajo (casillas de 17x17px). En una pantalla
   táctil eso significa fallar el toque seguido, o tocar la opción
   equivocada — es de las cosas que más hacen sentir "no terminada"
   una app, aunque el diseño se vea bien.
   ========================================================= */
@media (max-width: 640px) {
    /* Casillas y radios — se agrandan a un tamaño usable con el dedo. */
    .lista-filtro-radio input[type="checkbox"],
    .lista-filtro-radio input[type="radio"],
    .filtro-bloque input[type="checkbox"],
    .filtro-bloque input[type="radio"] {
        width: 22px;
        height: 22px;
        min-width: 22px;
        min-height: 22px;
    }
    /* La etiqueta completa alrededor de la casilla también es tocable,
       así que se le da altura suficiente — así el área real de toque
       es toda la fila, no solo el cuadradito. */
    .filtro-bloque label,
    .lista-filtro-radio label { min-height: 44px; }

    /* Botones de vista (Grilla / Por categorías) — eran de 28px de alto. */
    .vista-catalogo-btn { min-height: 40px; padding-left: 14px; padding-right: 14px; }

    /* Cerrar el panel de filtros — era 32x32, muy chico para un botón
       que se toca con el pulgar en la esquina. */
    .catalogo-sidebar-cerrar { width: 44px; height: 44px; font-size: 20px; }

    /* Botones de acción dentro de los filtros. */
    .btn-precio-aplicar,
    .btn-limpiar-filtros-arriba { min-height: 44px; }

    /* Enlaces sueltos del pie y de secciones — se les da un área
       vertical mínima sin cambiar cómo se ven. */
    .footer-mercado a,
    .footer-inicio a { display: inline-block; padding: 6px 0; }
}

/* ============================================================
   REDISEÑO MÓVIL — Farmavitae · Guía de estilos
   ------------------------------------------------------------
   Solo para celular (ver @media abajo) — la versión de escritorio
   se queda exactamente igual. Colores, radios y componentes
   siguiendo la guía de estilos entregada: un solo azul de acción
   (#0B57A4), tarjetas delimitadas por borde de 1px en vez de sombra
   difusa, y un badge por tarjeta (nunca dos apilados).
   ============================================================ */
@media (max-width: 640px) {
    /* --- Tarjeta de producto: borde en vez de sombra, radio 18px --- */
    .producto-card-mkt {
        border-radius: 18px;
        border: 1px solid #E9EEF3;
        box-shadow: none;
    }
    .producto-card-mkt:hover {
        box-shadow: none;
        transform: none;
        border-color: #E9EEF3;
    }
    .producto-card-nombre {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: 32px;
    }
    .producto-card-precio { color: #0B2545; font-weight: 800; }
    .producto-card-precio-antes { color: #9AA8B8; }

    /* --- Un solo badge visible por tarjeta — antes se podían apilar
       "Nuevo" + "Oferta" al mismo tiempo, algo que la guía marca
       explícitamente como "qué evitar". Colores planos, no degradados. --- */
    .producto-card-badges { display: flex; }
    .producto-card-badges .producto-card-badge:not(:first-child) { display: none; }
    .producto-card-badge {
        border-radius: 8px;
        font-weight: 800;
        font-size: 9.5px;
        letter-spacing: .05em;
        text-transform: uppercase;
        box-shadow: none;
        background: none;
    }
    .producto-card-badge-oferta { background: #E4462B; }
    .producto-card-badge-nuevo { background: #0B57A4; }
    .producto-card-badge-destacado { background: #6D3BE4; }
    .producto-card-badge-original { background: #EAF7F0; color: #0E7A47; text-transform: none; letter-spacing: 0; }
    .producto-card-badge-agotado { background: #8494A8; }
    .producto-card-badge-2x1 { background: #0B57A4; color: #fff; }

    /* --- Botones: alto fijo de 44px, radio 14px --- */
    .btn-mkt-primary {
        height: 44px;
        border-radius: 14px;
        /* Antes era un azul fijo (#0B57A4) sin variable — con un diseño
           de temporada activo, el botón se quedaba azul en celular
           mientras todo lo demás sí cambiaba de color. */
        background: var(--brand);
        font-weight: 800;
    }
    .btn-mkt-secundario {
        height: 44px;
        border-radius: 14px;
        border: 1px solid #D7E1EC;
        color: #41566E;
        background: #fff;
    }

    /* --- Chips de filtro / vista: 34px de alto, píldora completa --- */
    .vista-catalogo-btn {
        height: 34px;
        border-radius: 999px;
        border: 1px solid #E2E8EF;
        font-weight: 700;
        font-size: 13px;
        background: #fff;
        color: #41566E;
    }
    .vista-catalogo-btn.activo {
        background: #0B57A4;
        color: #fff;
        border-color: #0B57A4;
    }
}



/* ============================================================
   IMPACTO SOCIAL — versión móvil, mismo sistema de diseño que el
   resto (Inicio, Marketplace): borde de 1px en vez de sombra difusa,
   un solo azul de acción, radios consistentes.
   ============================================================ */
@media (max-width: 640px) {
    .impacto-social-hero-visual {
        box-shadow: none;
        border-color: #E9EEF3;
        border-radius: 18px;
    }
    .impacto-social-hero-stat strong { background: #0B57A4; }
    .impacto-social-inicio-card {
        box-shadow: none;
        border: 1px solid #E9EEF3;
        border-radius: 18px;
    }
    .impacto-social-inicio-card:hover { box-shadow: none; transform: none; }
    .impacto-social-inicio-programa,
    .impacto-social-inicio-cta { color: #0B57A4; }
    .impacto-social-inicio-franja { background: linear-gradient(135deg, #E4462B, #4CE0D0 55%, #0B57A4); }
}

/* Selector de cantidad (−/número/+) — usado en la ficha de producto
   (modal) y reutilizable donde más haga falta. No existía CSS para
   este patrón en ningún lado; el conector JS (conectarSelectorCantidadTarjeta)
   ya existía pero nunca se había usado con un marcado con estilo. */
.selector-cantidad-card {
    display: flex;
    align-items: center;
    height: 44px;
    border-radius: 14px;
    border: 1px solid #D7E1EC;
    overflow: hidden;
    flex-shrink: 0;
}
.selector-cantidad-card .btn-cantidad-menos,
.selector-cantidad-card .btn-cantidad-mas {
    width: 40px; height: 100%;
    border: none;
    background: #F2F5F9;
    color: #0B2545;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
}
.selector-cantidad-card .btn-cantidad-menos:hover,
.selector-cantidad-card .btn-cantidad-mas:hover { background: #E2E8EF; }
.selector-cantidad-card .input-cantidad-card {
    width: 40px;
    height: 100%;
    border: none;
    text-align: center;
    font-size: 14.5px;
    font-weight: 800;
    color: #0B2545;
    -moz-appearance: textfield;
}
.selector-cantidad-card .input-cantidad-card::-webkit-inner-spin-button,
.selector-cantidad-card .input-cantidad-card::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

@media (max-width: 640px) {
    /* Barra de acciones de la ficha de producto — fija al fondo del
       modal, siempre visible sin tener que hacer scroll hasta abajo
       para agregar al carrito ("CTA fijo" de la guía de estilos). */
    .ini-producto-modal-acciones {
        position: sticky;
        bottom: 0;
        left: 0; right: 0;
        margin: var(--space-4) calc(var(--space-4) * -1) calc(var(--space-4) * -1);
        padding: 12px var(--space-4) 18px;
        background: var(--white);
        border-top: 1px solid #EEF1F5;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }
    .ini-producto-modal-acciones .btn-mkt-primary { flex: 1 1 auto; min-width: 0; }
    .ini-producto-modal-acciones .selector-cantidad-modal { order: -1; }
    .ini-producto-modal-acciones #ini-modal-perfil,
    .ini-producto-modal-acciones #ini-modal-compartir { flex: 1 1 auto; height: 44px; font-size: 13px; }
}

/* Grilla de escalas de precio mayorista — reemplaza al <select> +
   tabla que había antes. Cada escala es una tarjeta tocable, la
   elegida se resalta en azul — mismo patrón que la guía de estilos. */
.tarjeta-mayorista-elige-titulo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    font-weight: 800;
    color: #0B2545;
    margin: 4px 0 8px;
}
.tarjeta-mayorista-elige-titulo span { font-size: 11px; font-weight: 600; color: #8494A8; }
.grid-escalas-mayorista {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
    margin-bottom: var(--space-3);
}
.tarjeta-escala-mayorista {
    border: 1.5px solid #E9EEF3;
    background: #fff;
    border-radius: 14px;
    padding: 10px 11px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    cursor: pointer;
    text-align: left;
}
.tarjeta-escala-mayorista.activa { border-color: #0B57A4; background: #EEF5FC; }
.tarjeta-escala-cantidad { font-size: 13px; font-weight: 800; color: #0B2545; }
.tarjeta-escala-precio { font-size: 12px; font-weight: 700; color: #5A6B80; }
.tarjeta-escala-mayorista.activa .tarjeta-escala-precio { color: #0B57A4; }
.tarjeta-escala-descuento { font-size: 10.5px; font-weight: 700; color: #8494A8; }
.tarjeta-escala-mayorista.activa .tarjeta-escala-descuento { color: #0E7A47; }

/* Estadísticas dentro del banner oscuro de Distribución en celular
   (3-24 unidades / sin mínimo) — mismo banner base que Marketplace,
   con esta fila extra debajo del título. */
@media (max-width: 640px) {
    .hero-banner-distribucion-stats { display: flex; gap: 18px; margin-top: 2px; }
    .hero-banner-distribucion-stats strong { display: block; font-size: 15px; font-weight: 800; color: #fff; }
    .hero-banner-distribucion-stats span { display: block; font-size: 10.5px; font-weight: 600; color: #9DC4E8; margin-top: 1px; }
}

/* El título compacto y la ilustración de Distribución quedan
   reemplazados por el banner oscuro nuevo en celular — dejarlos los
   3 a la vez duplicaba el mensaje ("Compra al por mayor" aparecía 2
   veces seguidas antes de llegar a los productos). */
@media (max-width: 640px) {
    .titulo-movil-compacto,
    .dist-hero-visual { display: none; }
}

/* Perfil de tienda en móvil — pestañas como subrayado (no la píldora
   compartida .tabs/.tab de siempre) y tarjetas de datos con borde en
   vez de fondo plano, siguiendo la guía de estilos. Va scoped a
   .tienda-tabs específicamente, para no afectar el resto del sitio
   que sí usa el estilo de píldora normal. */
@media (max-width: 640px) {
    .tienda-tabs {
        background: none;
        border: none;
        border-bottom: 1px solid #EEF1F5;
        border-radius: 0;
        padding: 0;
        gap: 18px;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        position: sticky;
        top: 0;
        z-index: 15;
        background: var(--white);
    }
    .tienda-tabs .tab {
        flex: 0 0 auto;
        background: none;
        border-radius: 0;
        border-bottom: 2.5px solid transparent;
        padding: 12px 0 10px;
        font-size: 13.5px;
        font-weight: 600;
        color: #8494A8;
    }
    .tienda-tabs .tab:hover { background: none; color: #0B2545; }
    .tienda-tabs .tab.activa {
        color: #0B57A4;
        border-bottom-color: #0B57A4;
        font-weight: 800;
        background: none;
    }
    .tienda-datos-grid > div {
        border: 1px solid #E9EEF3;
        border-radius: 15px;
        padding: 12px 13px;
        background: var(--white);
    }
    .tienda-portada { height: 132px; }
    .tienda-banner-avatar { border-radius: 20px; }
}

/* ============================================================================
   PARTE 4 — PERFIL DE TIENDA (SOLO CELULAR) — SISTEMA --fv-*
   ============================================================================ */
.tienda-banner-titulo-fila { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tienda-verificado { display: none; }
.tienda-banner-acciones { display: none; }
.tienda-redes:empty { display: none; }
.tienda-bloque-mayoreo,
.tienda-bloque-contacto {
    margin-top: var(--space-4, 16px);
    padding: 16px;
    border: 1px solid var(--surface-3);
    border-radius: var(--r-md, 12px);
    background: var(--white);
}
.tienda-bloque-mayoreo h3,
.tienda-bloque-contacto h3 { margin: 0 0 6px; font-size: var(--text-sm); font-weight: 800; color: var(--ink); }
.tienda-bloque-mayoreo p { margin: 0 0 10px; font-size: var(--text-sm); color: var(--ink-muted); }
.tienda-contacto-lista li { font-size: var(--text-sm); margin-bottom: 8px; }
.tienda-contacto-lista a { color: var(--brand); text-decoration: none; font-weight: 600; }
.tienda-contacto-nota { margin: 10px 0 0; font-size: 11.5px; color: var(--ink-muted); line-height: 1.5; }

/* Iconos que tienda.js inyecta en la meta y en las redes — tamaño
   controlado en TODAS las resoluciones (sin esto, en escritorio los
   SVG salían a tamaño natural, gigantes). */
.tienda-banner-meta span { display: inline-flex; align-items: center; gap: 5px; }
.tienda-banner-meta span svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--ink-muted); }
.tienda-banner-meta span:empty { display: none; }
.tienda-verificado svg { width: 18px; height: 18px; }
.tienda-redes a,
.tienda-banner-redes a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--ink-light);
}
.tienda-redes a svg,
.tienda-banner-redes a svg { width: 17px; height: 17px; }
.tienda-redes a:hover,
.tienda-banner-redes a:hover { background: var(--accent-dim, #E6F7F7); text-decoration: none; }

/* Iconos de la pestaña "Información" — tamaño fijo en todas las
   resoluciones (si no, en escritorio los SVG salen gigantes). */
.tienda-contacto-lista { list-style: none; margin: 0; padding: 0; }
.tienda-contacto-lista li { display: flex; align-items: center; gap: 10px; }
.tienda-contacto-lista li svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--ink-muted); }
.tienda-accion-contactar svg { width: 16px; height: 16px; flex-shrink: 0; }
.tienda-verificado svg { width: 18px; height: 18px; }

@media (max-width: 640px) {
    body.cuerpo-mercado { background: #fff !important; }
    .volver-marketplace { margin-bottom: var(--fv-s-3, 12px); font-size: 12.5px; }

    /* ---- Portada más baja + banner compacto, acciones sin scroll ---- */
    .tienda-perfil-header { margin-bottom: var(--fv-s-4, 16px); }
    .tienda-portada { height: 104px; }
    .tienda-banner {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: 0 0 var(--fv-s-3, 12px);
        background: none;
        box-shadow: none;
        border-radius: 0;
    }
    .tienda-banner-avatar {
        width: 60px;
        height: 60px;
        margin: -30px 0 2px;
        align-self: flex-start;
        border-radius: 15px;
        border-width: 3px;
        box-shadow: 0 6px 16px -6px rgba(10,30,60,.25);
        font-size: 19px;
    }
    .tienda-banner-avatar img { padding: 8px; }
    .tienda-banner-info { width: 100%; min-width: 0; }
    .tienda-banner-titulo-fila { flex-wrap: wrap; align-items: center; }
    .tienda-banner-info h1 {
        margin: 0;
        font-family: var(--fv-font);
        font-size: 22px;
        font-weight: 800;
        text-transform: none;
        color: var(--fv-ink);
        line-height: 1.2;
    }
    .tienda-verificado {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        color: var(--fv-blue);
        flex-shrink: 0;
    }
    .tienda-verificado svg { width: 18px; height: 18px; }

    /* Meta en una línea, con iconos de línea */
    .tienda-banner-meta {
        gap: 12px;
        margin-top: 4px;
        font-size: 11.5px;
        color: var(--fv-muted);
        flex-wrap: wrap;
    }
    .tienda-banner-meta span {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        text-transform: none;
    }
    #tienda-ubicacion, #tienda-ubicacion-completa { text-transform: none; }
    .tienda-banner-meta span svg { width: 13px; height: 13px; color: var(--fv-soft); flex-shrink: 0; }
    .tienda-banner-meta span:empty { display: none; }

    /* Redes: 4 iconos en una fila (no chips en dos filas) */
    .tienda-banner-redes {
        margin-top: 8px;
        gap: 8px;
        flex-wrap: nowrap;
    }
    .tienda-banner-redes a {
        width: 34px;
        height: 34px;
        padding: 0;
        border-radius: 50%;
        background: var(--fv-surface);
        color: var(--fv-body);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .tienda-banner-redes a:hover { background: var(--fv-surface); }
    .tienda-banner-redes a svg { width: 17px; height: 17px; }

    /* Acción "Contactar" visible sin scroll */
    .tienda-banner-acciones { display: flex; flex: 1 1 100%; gap: var(--fv-s-2, 8px); margin-top: var(--fv-s-2, 8px); }
    .tienda-accion-contactar {
        flex: 1;
        height: 42px;
        border-radius: var(--fv-r-md, 12px);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-size: 13px;
    }
    .tienda-accion-contactar svg { width: 16px; height: 16px; }

    /* ---- Pestañas: una fila, subrayado, sticky ---- */
    .tienda-tabs {
        margin: 0 0 var(--fv-s-4, 16px);
        gap: 20px;
        padding: 2px var(--fv-s-4, 16px) 0;
        margin-inline: calc(var(--fv-s-4, 16px) * -1);
        border-top: 1px solid var(--fv-border, #E9EEF3);
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
        mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
    }
    .tienda-tabs .tab {
        font-size: 13.5px;
        font-weight: 600;
        white-space: nowrap;
        padding: 13px 0 11px;
        border-bottom-width: 3px;
        color: var(--fv-soft, #8494A8);
    }
    .tienda-tabs .tab.activa { color: var(--fv-blue, #0B57A4); border-bottom-color: var(--fv-blue, #0B57A4); font-weight: 800; }

    /* ---- Se elimina el bloque "Selección especial" (estrella) ---- */
    #tienda-destacados-wrap { display: none !important; }

    /* ---- Buscador de la tienda + orden ---- */
    .tienda-buscador-fila {
        display: flex;
        gap: var(--fv-s-2, 8px);
        flex-wrap: wrap;
        padding: 0;
        border: none;
        box-shadow: none;
        background: none;
        margin-bottom: var(--fv-s-3, 12px);
    }
    .tienda-buscador-fila input[type="search"] {
        display: block;
        flex: 1 1 100%;
        height: 44px;
        padding: 0 14px 0 40px;
        font-size: 16px;
        border: 1px solid var(--fv-border);
        border-radius: var(--fv-r-md, 12px);
        background: var(--fv-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238494A8' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 13px center / 17px;
    }
    .tienda-orden-select {
        flex: 1 1 auto;
        height: 40px;
        padding: 0 10px;
        font-size: 13px;
        border: 1px solid var(--fv-border);
        border-radius: var(--fv-r-md, 12px);
        background: #fff;
    }

    /* ---- Paneles de contenido sin la "caja" gris ---- */
    #panel-tienda-acerca.card,
    #panel-tienda-politicas.card {
        padding: 0;
        border: none;
        box-shadow: none;
        background: none;
    }
    #panel-tienda-acerca h2,
    #panel-tienda-politicas h2 { font-size: 18px; font-weight: 800; color: var(--fv-ink); margin: 0 0 var(--fv-s-3, 12px); }
    .tienda-descripcion { font-size: 13px; line-height: 1.6; color: var(--fv-body); }
    .tienda-datos-grid { grid-template-columns: 1fr 1fr; gap: var(--fv-s-2, 8px); margin: var(--fv-s-3,12px) 0; }
    .tienda-datos-grid > div { border-color: var(--fv-border); border-radius: var(--fv-r-md, 12px); }
    .tienda-redes:not(.tienda-banner-redes) a {
        width: 36px; height: 36px; border-radius: 50%;
        background: var(--fv-surface); color: var(--fv-body);
        display: inline-flex; align-items: center; justify-content: center;
    }
    .tienda-redes:not(.tienda-banner-redes) a svg { width: 18px; height: 18px; }

    .tienda-bloque-mayoreo,
    .tienda-bloque-contacto {
        padding: 14px;
        border: 1px solid var(--fv-border);
        border-radius: var(--fv-r-lg, 14px);
        background: #fff;
    }
    .tienda-bloque-mayoreo h3,
    .tienda-bloque-contacto h3 { margin: 0 0 6px; font-size: 14px; font-weight: 800; color: var(--fv-ink); }
    .tienda-bloque-mayoreo p { margin: 0 0 10px; font-size: 12.5px; color: var(--fv-muted); }
    .tienda-bloque-mayoreo .btn-mkt-secundario { height: 40px; width: 100%; }
    .tienda-contacto-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
    .tienda-contacto-lista li { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
    .tienda-contacto-lista li svg { width: 17px; height: 17px; color: var(--fv-soft); flex-shrink: 0; }
    .tienda-contacto-lista a { color: var(--fv-blue); text-decoration: none; font-weight: 600; }
    .tienda-contacto-nota { margin: 10px 0 0; font-size: 11px; color: var(--fv-soft); line-height: 1.45; }
    .tienda-lista-politicas li { font-size: 12.5px; line-height: 1.55; color: var(--fv-body); }
}

/* Filas de "información contextual" del carrito (dirección del punto de
   retiro, mensaje de cobertura, transportista) — un ícono circular con
   acento teal + texto, sin tarjeta/fondo a propósito: con varias
   apiladas, cada una en su propia tarjeta se veía recargado (ver
   historial). El ícono le da algo de peso visual sin volver a esa caja. */
.panel-carrito-info-fila { margin-top: 8px; display: flex; align-items: flex-start; gap: 10px; }
.panel-carrito-info-icono {
    width: 26px;
    height: 26px;
    padding: 6px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--brand);
    flex-shrink: 0;
    box-sizing: border-box;
}
.panel-carrito-envio-cobertura { margin-top: 0; }
.panel-carrito-envio-cobertura p { margin: 0; padding-top: 3px; font-size: 12px; line-height: 1.5; color: var(--ink-muted); }
#panel-carrito-punto-retiro-direccion-texto { display: inline-block; padding-top: 3px; font-size: 12px; color: var(--ink-muted); }

.panel-carrito-envio-transportista {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--ink-muted);
}

/* Enlace de contacto que acompaña la dirección de retiro / mensaje de
   cobertura — mismo motivo de ícono circular que el resto de esta
   familia, pero en verde WhatsApp para que se note que es accionable
   (a diferencia de las filas informativas de arriba, que son de solo
   lectura). */
.panel-carrito-info-contacto {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 600;
    color: #1F9C5A;
    text-decoration: none;
}
.panel-carrito-info-contacto:hover { text-decoration: underline; }
.panel-carrito-info-icono-whatsapp { background: rgba(37, 211, 102, .16); color: #1F9C5A; }

/* Grilla de escalas dentro del modal de vista previa (Distribución) —
   mismo componente que la tarjeta mayorista, con un poco más de
   margen porque acá vive dentro de la barra de acciones del modal,
   no en el cuerpo de una tarjeta normal. */
.grid-escalas-modal { grid-column: 1 / -1; margin-bottom: 8px; }

/* Precio original (al por menor) — en la tarjeta mayorista y en el
   modal de vista previa, para que quede claro contra qué se está
   comparando el ahorro de cada escala. */
.tarjeta-mayorista-precio-original,
.modal-precio-original-mayorista {
    font-size: 12px;
    color: var(--ink-muted);
    margin: 2px 0 10px;
}
.tarjeta-mayorista-precio-original span,
.modal-precio-original-mayorista span {
    text-decoration: line-through;
    font-weight: 700;
    color: var(--ink);
}
/* Fila "Precio normal" del resumen — tachada. */
.tarjeta-mayorista-resumen .resumen-normal,
.modal-resumen-mayorista .modal-resumen-normal {
    text-decoration: line-through;
    color: var(--fv-soft, #8494A8) !important;
    font-family: var(--fv-font);
    font-weight: 700;
}
/* Condiciones dentro del modal de Distribución */
.modal-mayorista-condiciones {
    grid-column: 1 / -1;
    margin: 10px 0 4px;
    padding: 12px 14px;
    background: var(--fv-surface, #F2F5F9);
    border-radius: var(--fv-r-md, 12px);
}
.modal-mayorista-condiciones p { margin: 0 0 6px; font-size: 12px; font-weight: 700; color: var(--fv-ink, #0B2545); }
.modal-mayorista-condiciones ul { margin: 0; padding-left: 16px; }
.modal-mayorista-condiciones li { font-size: 11.5px; line-height: 1.45; color: var(--fv-muted, #5A6B80); margin-bottom: 3px; }

/* Logo del transportista (si el admin subió uno) — reemplaza al
   ícono genérico de escudo cuando existe. */
#panel-carrito-envio-transportista-logo { height: 34px; width: auto; max-width: 110px; object-fit: contain; flex-shrink: 0; }

/* Bloque "Envíos" en la pestaña Información del perfil de tienda —
   con datos reales (umbral de envío gratis configurado, notificación
   sanitaria solo si de verdad aplica a TODOS los productos de esa
   tienda). No incluye devoluciones a propósito. */
.tienda-bloque-envios { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--surface-3); display: flex; flex-direction: column; gap: 12px; }
.tienda-bloque-envios h3 { margin: 0; font-size: var(--text-sm); font-weight: 800; color: var(--ink); }
.tienda-envios-item { display: flex; gap: 11px; align-items: flex-start; }
/* El selector debe llevar .tienda-envios-item por delante: si no, la
   regla ".tienda-envios-item span" (más específica) le gana y el
   <span> del icono termina como display:block con margin-top, dejando
   el SVG pegado a la esquina superior izquierda de su cuadro. */
.tienda-envios-item .tienda-envios-icono {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 11px;
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    font-size: 0;
}
.tienda-envios-item .tienda-envios-icono svg { width: 19px; height: 19px; display: block; }
.tienda-envios-item strong { display: block; font-size: 13px; font-weight: 700; color: var(--ink); }
.tienda-envios-item > div span { display: block; font-size: 12px; color: var(--ink-muted); line-height: 1.45; margin-top: 2px; }


/* ============================================================================
   PARTE 2 — MARKETPLACE · LISTADO (SOLO CELULAR) — SISTEMA --fv-*
   ----------------------------------------------------------------------------
   Buscador arriba · barra sticky con Filtros (contador) + orden + total ·
   chips de categoría (no círculos) · chips de filtros activos removibles ·
   cupón en una franja · sin toggle Grilla/Categorías · "Cargar más" con
   "X de Y productos" · tarjeta de producto limpia.
   ============================================================================ */

/* --- "Cargar más" (todas las resoluciones) --- */
.catalogo-cargar-mas-info { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--ink-muted); text-align: center; }
.paginacion-mercado { flex-direction: column; align-items: center; gap: var(--space-3); }
.paginacion-mercado .btn-cargar-mas {
    width: auto;
    min-width: 220px;
    max-width: 100%;
    height: 44px;
    padding: 0 26px;
    border-radius: 14px;
    border: 1px solid var(--fv-blue, #0B57A4);
    background: #fff;
    color: var(--fv-blue, #0B57A4);
    font-family: var(--font);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--ease);
}
.paginacion-mercado .btn-cargar-mas:hover { background: color-mix(in srgb, var(--fv-blue, #0B57A4) 7%, #fff); }

@media (max-width: 640px) {
    /* ---- Página blanca + header compacto ---- */
    body.cuerpo-mercado { background: #fff !important; }
    .nav-sitio { border-bottom: 1px solid var(--fv-border); box-shadow: 0 2px 10px -6px rgba(10,30,60,.12); }
    .logo-sitio img { height: 34px; }

    /* ---- Franja de confianza: estática, 3 columnas (igual que Inicio) ---- */
    .barra-confianza { background: var(--fv-ink); }
    .barra-confianza-inner {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--fv-s-2);
        overflow: visible;
        -webkit-mask-image: none;
        mask-image: none;
        padding: 9px var(--fv-s-3);
        max-width: none;
    }
    .barra-confianza-lista { display: contents; }
    .barra-confianza-lista li {
        flex-direction: column;
        align-items: center;
        gap: 3px;
        text-align: center;
        white-space: normal;
        font-size: 10px;
        font-weight: 600;
        line-height: 1.15;
        min-width: 0;
    }
    .barra-confianza-lista .ini-ico { width: 15px; height: 15px; color: var(--fv-teal); }
    .barra-confianza-largo { display: none; }
    .barra-confianza-corto { display: inline; }
    .barra-confianza-ayuda { display: none; }

    /* ---- Fuera de la home móvil: círculos de categoría + tiendas destacadas ---- */
    #seccion-categorias-hero-mkt { display: none !important; }

    /* ---- Cupones: una franja compacta ---- */
    .seccion-cupones-vitrina {
        padding: var(--fv-s-3);
        margin-bottom: var(--fv-s-4);
        background: #fff;
        border: 1px solid var(--fv-border);
        border-radius: var(--fv-r-lg);
    }
    .seccion-cupones-vitrina h2 {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--fv-soft);
        margin: 0 0 var(--fv-s-2);
    }
    .seccion-cupones-vitrina h2 svg,
    .seccion-cupones-vitrina h2 img { display: none; }
    .cupones-vitrina-sub { display: none; }
    .fila-cupones-vitrina { gap: var(--fv-s-2); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent); }
    .cupon-vitrina-card {
        flex: 0 0 auto;
        min-height: 0;
        padding: 9px 12px;
        border: 1px solid var(--fv-border);
        border-radius: var(--fv-r-md);
        box-shadow: none;
    }

    /* ---- Catálogo: barra sticky (buscador + Filtros + orden) ----
       top: aprox. altura del header compacto (logo 34px + padding). Si
       queda un hueco o solapa al validar en el host, ajustar este valor. */
    .catalogo-titulo-principal { font-size: 19px; font-weight: 800; color: var(--fv-ink); margin: var(--fv-s-2) 0 var(--fv-s-3); }
    .catalogo-buscador {
        position: sticky;
        top: 56px;
        z-index: 25;
        display: flex;
        flex-wrap: wrap;
        gap: var(--fv-s-2);
        padding: var(--fv-s-3) var(--fv-s-4);
        margin: 0 calc(var(--fv-s-4) * -1) var(--fv-s-3);
        background: #fff;
        border: none;
        border-bottom: 1px solid var(--fv-border);
        box-shadow: none;
    }
    .catalogo-buscador input[type="search"] {
        display: block;
        flex: 1 1 100%;
        order: -1;
        height: 44px;
        padding: 0 14px 0 42px;
        font-size: 16px;
        border: 1px solid var(--fv-border);
        border-radius: var(--fv-r-md);
        background: var(--fv-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238494A8' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 14px center / 17px;
    }
    .btn-abrir-filtros-movil {
        flex: 0 0 auto;
        height: 40px;
        padding: 0 13px;
        gap: 6px;
        border: 1px solid var(--fv-border);
        border-radius: var(--fv-r-md);
        background: #fff;
        color: var(--fv-body);
        font-weight: 700;
        font-size: 13px;
        position: relative;
    }
    .contador-filtros-activos {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: var(--fv-r-pill);
        background: var(--fv-blue);
        color: #fff;
        font-size: 11px;
        font-weight: 800;
        line-height: 1;
    }
    .contador-filtros-activos.oculto { display: none; }
    .catalogo-buscador select {
        flex: 1 1 auto;
        min-width: 0;
        height: 40px;
        padding: 0 10px;
        font-size: 13px;
        border: 1px solid var(--fv-border);
        border-radius: var(--fv-r-md);
        background: #fff;
    }

    /* ---- Chips de categoría (reemplazan los círculos con emoji) ---- */
    .chips-categoria-sticky {
        display: flex;
        gap: var(--fv-s-2);
        overflow-x: auto;
        scrollbar-width: none;
        padding: var(--fv-s-3) 0 var(--fv-s-2);
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent);
        mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent);
    }
    .chips-categoria-sticky:empty { display: none; }
    .chips-categoria-sticky::-webkit-scrollbar { display: none; }
    .chip-categoria {
        flex: 0 0 auto;
        height: 32px;
        padding: 0 14px;
        display: inline-flex;
        align-items: center;
        border: 1px solid var(--fv-border);
        border-radius: var(--fv-r-pill);
        background: #fff;
        color: var(--fv-body);
        font-family: var(--font);
        font-weight: 600;
        font-size: 12.5px;
    }
    .chip-categoria.activo {
        background: var(--fv-blue);
        border-color: var(--fv-blue);
        color: #fff;
        box-shadow: none;
    }

    /* ---- Chips de filtros activos removibles + "Limpiar" ---- */
    .chips-filtros-activos {
        display: flex;
        flex-wrap: wrap;
        gap: var(--fv-s-2);
        margin: 0 0 var(--fv-s-3);
    }
    .chips-filtros-activos.oculto { display: none; }
    .chip-filtro-activo {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 30px;
        padding: 0 6px 0 11px;
        border-radius: var(--fv-r-pill);
        border: 1px solid var(--fv-blue);
        background: color-mix(in srgb, var(--fv-blue) 8%, #fff);
        color: var(--fv-blue);
        font-family: var(--font);
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
    }
    .chip-filtro-activo span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: color-mix(in srgb, var(--fv-blue) 16%, #fff);
        font-size: 10px;
        line-height: 1;
    }
    .chip-filtro-limpiar {
        height: 30px;
        padding: 0 10px;
        border: none;
        background: none;
        color: var(--fv-muted);
        font-family: var(--font);
        font-size: 12px;
        font-weight: 700;
        text-decoration: underline;
        cursor: pointer;
    }

    /* ---- Cabecera de resultados: solo el total, sin toggle de vista ---- */
    .vista-catalogo-switch { display: none !important; }
    .btn-limpiar-busqueda-movil { display: none !important; }
    .catalogo-resultados-cabecera { margin-bottom: var(--fv-s-3); }
    .catalogo-conteo { font-size: 12.5px; font-weight: 600; color: var(--fv-muted); }

    /* ---- "Cargar más" ---- */
    .paginacion-mercado {
        flex-direction: column;
        align-items: center;
        gap: var(--fv-s-3);
        margin-top: var(--fv-s-5);
    }

    /* ---- Filtros del panel: chips que envuelven en varias líneas
       (no fila con scroll que corta a la derecha) ---- */
    .catalogo-sidebar .lista-filtro-radio {
        flex-wrap: wrap;
        overflow: visible;
        -webkit-mask-image: none;
        mask-image: none;
    }
    .catalogo-sidebar .lista-filtro-radio label {
        border: 1px solid var(--fv-border);
        background: #fff;
    }
    .catalogo-sidebar .lista-filtro-radio label:has(input:checked) {
        background: var(--fv-blue);
        border-color: var(--fv-blue);
        color: #fff;
    }

    /* ========================================================================
       TARJETA DE PRODUCTO — UNIFICADA (Inicio · Marketplace · Tienda), CELULAR
       ------------------------------------------------------------------------
       Misma tarjeta en las 3 páginas: imagen 1:1, marca en mayúsculas,
       nombre a 2 líneas, descripción a 2 líneas, precio, selector de
       cantidad y botón "Agregar · $X". "Visitar tienda" se quita de la
       tarjeta (la tarjeta entera ya abre la vista previa).
       ======================================================================== */
    .grid-productos .producto-card-mkt,
    #grid-ofertas .producto-card-mkt,
    #grid-novedades .producto-card-mkt,
    #grid-mas-vendidos .producto-card-mkt,
    #grid-productos-inicio .producto-card-mkt {
        width: auto !important;
        flex: none !important;
        height: auto !important;
        min-height: 0 !important;
        border-radius: var(--fv-r-lg);
        border: 1px solid var(--fv-border);
        box-shadow: none;
    }
    .grid-productos .producto-card-img-wrap,
    #grid-ofertas .producto-card-img-wrap,
    #grid-novedades .producto-card-img-wrap,
    #grid-mas-vendidos .producto-card-img-wrap,
    #grid-productos-inicio .producto-card-img-wrap { aspect-ratio: 1 / 1; }

    .grid-productos .producto-card-body,
    #grid-ofertas .producto-card-body,
    #grid-novedades .producto-card-body,
    #grid-mas-vendidos .producto-card-body,
    #grid-productos-inicio .producto-card-body { padding: 11px; gap: 0; }

    .grid-productos .producto-card-promo-badge,
    #grid-ofertas .producto-card-promo-badge,
    #grid-novedades .producto-card-promo-badge,
    #grid-mas-vendidos .producto-card-promo-badge,
    #grid-productos-inicio .producto-card-promo-badge { display: none !important; }

    /* "Visitar tienda" — enlace de texto debajo del botón "Agregar". */
    .grid-productos .btn-ir-perfil,
    #grid-ofertas .btn-ir-perfil,
    #grid-novedades .btn-ir-perfil,
    #grid-mas-vendidos .btn-ir-perfil,
    #grid-productos-inicio .btn-ir-perfil {
        display: block;
        width: 100%;
        margin-top: 7px;
        padding: 4px 0;
        text-align: center;
        font-size: 11.5px;
        font-weight: 700;
        color: var(--fv-blue);
        text-decoration: none;
    }

    .grid-productos .producto-card-tienda,
    #grid-ofertas .producto-card-tienda,
    #grid-novedades .producto-card-tienda,
    #grid-mas-vendidos .producto-card-tienda,
    #grid-productos-inicio .producto-card-tienda {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--fv-soft);
        margin: 0 0 2px;
    }
    .grid-productos .producto-card-nombre,
    #grid-ofertas .producto-card-nombre,
    #grid-novedades .producto-card-nombre,
    #grid-mas-vendidos .producto-card-nombre,
    #grid-productos-inicio .producto-card-nombre {
        font-size: 13px;
        font-weight: 600;
        color: var(--fv-ink);
        min-height: 34px;
        margin-bottom: 3px;
    }
    /* La descripción tiene un alto fijo (~3 líneas) con SCROLL propio —
       así la tarjeta no crece por descripciones largas, pero el texto
       completo se puede leer deslizando dentro del recuadro sin abrir la
       ficha. overscroll-behavior:contain evita que el gesto de scroll se
       "escape" a la página al llegar al borde. */
    .grid-productos .producto-card-descripcion,
    #grid-ofertas .producto-card-descripcion,
    #grid-novedades .producto-card-descripcion,
    #grid-mas-vendidos .producto-card-descripcion,
    #grid-productos-inicio .producto-card-descripcion {
        display: block !important;
        -webkit-line-clamp: none !important;
        -webkit-box-orient: initial;
        max-height: 3.6em !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        font-size: 11.5px;
        line-height: 1.35;
        color: var(--fv-muted);
        margin: 0 0 6px;
        padding-right: 3px;
    }
    .grid-productos .producto-card-descripcion::-webkit-scrollbar,
    #grid-ofertas .producto-card-descripcion::-webkit-scrollbar,
    #grid-novedades .producto-card-descripcion::-webkit-scrollbar,
    #grid-mas-vendidos .producto-card-descripcion::-webkit-scrollbar,
    #grid-productos-inicio .producto-card-descripcion::-webkit-scrollbar { width: 4px; display: block; }
    .grid-productos .producto-card-descripcion::-webkit-scrollbar-thumb,
    #grid-ofertas .producto-card-descripcion::-webkit-scrollbar-thumb,
    #grid-novedades .producto-card-descripcion::-webkit-scrollbar-thumb,
    #grid-mas-vendidos .producto-card-descripcion::-webkit-scrollbar-thumb,
    #grid-productos-inicio .producto-card-descripcion::-webkit-scrollbar-thumb { background: var(--fv-border, #E9EEF3); border-radius: 4px; }

    .grid-productos .producto-card-precio,
    #grid-ofertas .producto-card-precio,
    #grid-novedades .producto-card-precio,
    #grid-mas-vendidos .producto-card-precio,
    #grid-productos-inicio .producto-card-precio,
    .grid-productos .producto-card-precio-actual,
    #grid-ofertas .producto-card-precio-actual,
    #grid-novedades .producto-card-precio-actual,
    #grid-mas-vendidos .producto-card-precio-actual,
    #grid-productos-inicio .producto-card-precio-actual {
        font-size: 16px;
        font-weight: 800;
        color: var(--fv-ink);
        min-height: 0;
    }
    .grid-productos .producto-card-precio-antes,
    #grid-ofertas .producto-card-precio-antes,
    #grid-novedades .producto-card-precio-antes,
    #grid-mas-vendidos .producto-card-precio-antes,
    #grid-productos-inicio .producto-card-precio-antes { font-size: 11px; color: var(--fv-soft); }

    .grid-productos .producto-card-meta,
    #grid-ofertas .producto-card-meta,
    #grid-novedades .producto-card-meta,
    #grid-mas-vendidos .producto-card-meta,
    #grid-productos-inicio .producto-card-meta { min-height: 0; font-size: 10.5px; }

    /* Selector de cantidad — fila compacta. margin-top:auto empuja el
       par "cantidad + Agregar" al fondo de la tarjeta, así queda a la
       misma altura en todas las tarjetas de la fila sin importar cuánto
       texto (descripción, envío gratis…) tenga cada una. */
    .grid-productos .producto-card-cantidad,
    #grid-ofertas .producto-card-cantidad,
    #grid-novedades .producto-card-cantidad,
    #grid-mas-vendidos .producto-card-cantidad,
    #grid-productos-inicio .producto-card-cantidad {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 34px;
        margin: auto 0 6px;
        border: 1px solid var(--fv-border);
        border-radius: var(--fv-r-md);
        overflow: hidden;
    }
    .grid-productos .producto-card-cantidad button,
    #grid-ofertas .producto-card-cantidad button,
    #grid-novedades .producto-card-cantidad button,
    #grid-mas-vendidos .producto-card-cantidad button,
    #grid-productos-inicio .producto-card-cantidad button {
        width: 34px;
        height: 100%;
        border: none;
        background: var(--fv-surface);
        color: var(--fv-ink);
        font-size: 16px;
        font-weight: 700;
        flex: 0 0 auto;
    }
    .grid-productos .producto-card-cantidad input,
    #grid-ofertas .producto-card-cantidad input,
    #grid-novedades .producto-card-cantidad input,
    #grid-mas-vendidos .producto-card-cantidad input,
    #grid-productos-inicio .producto-card-cantidad input {
        flex: 1;
        min-width: 0;
        height: 100%;
        border: none;
        text-align: center;
        font-size: 13px;
        font-weight: 800;
        color: var(--fv-ink);
        background: #fff;
        -moz-appearance: textfield;
    }
    .grid-productos .producto-card-cantidad input::-webkit-outer-spin-button,
    .grid-productos .producto-card-cantidad input::-webkit-inner-spin-button,
    #grid-ofertas .producto-card-cantidad input::-webkit-inner-spin-button,
    #grid-novedades .producto-card-cantidad input::-webkit-inner-spin-button,
    #grid-mas-vendidos .producto-card-cantidad input::-webkit-inner-spin-button,
    #grid-productos-inicio .producto-card-cantidad input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

    .grid-productos .producto-card-acciones,
    #grid-ofertas .producto-card-acciones,
    #grid-novedades .producto-card-acciones,
    #grid-mas-vendidos .producto-card-acciones,
    #grid-productos-inicio .producto-card-acciones {
        display: block;
        margin-top: 0;
        padding-top: 0;
        border: none;
    }
    .grid-productos .btn-agregar-carrito,
    #grid-ofertas .btn-agregar-carrito,
    #grid-novedades .btn-agregar-carrito,
    #grid-mas-vendidos .btn-agregar-carrito,
    #grid-productos-inicio .btn-agregar-carrito {
        width: 100%;
        height: 40px;
        border-radius: var(--fv-r-md);
        background: var(--fv-blue);
        color: #fff;
        font-size: 12.5px;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }
    .grid-productos .btn-agregar-carrito svg,
    #grid-ofertas .btn-agregar-carrito svg,
    #grid-novedades .btn-agregar-carrito svg,
    #grid-mas-vendidos .btn-agregar-carrito svg,
    #grid-productos-inicio .btn-agregar-carrito svg { width: 15px; height: 15px; flex: 0 0 auto; }

    /* ========================================================================
       PARTE 2 — FICHA DE PRODUCTO (modal #ini-producto-modal) — CELULAR
       ======================================================================== */
    .ini-producto-modal-contenido { max-height: 96vh; border-radius: 20px 20px 0 0; }
    .ini-producto-modal-grid { display: block; }

    /* Imagen grande, a sangre, con controles flotando encima */
    .ini-producto-modal-imagenes { padding: 0 !important; background: #fff; gap: 0; }
    .ini-producto-modal-img-principal {
        position: relative;
        aspect-ratio: 4 / 3;
        border-radius: 0;
        margin: 0;
    }
    .ini-producto-modal-cerrar {
        top: 12px;
        left: 12px;
        right: auto;
        width: 40px;
        height: 40px;
        background: rgba(255,255,255,.92);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        box-shadow: 0 2px 10px rgba(10,30,60,.18);
        color: var(--fv-ink);
    }
    .ini-producto-modal-cerrar svg { width: 20px; height: 20px; }
    .ini-modal-compartir-flotante {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 3;
        width: 40px;
        height: 40px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: rgba(255,255,255,.92);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        box-shadow: 0 2px 10px rgba(10,30,60,.18);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--fv-ink);
        font-size: 0;
        cursor: pointer;
    }
    .ini-modal-compartir-flotante svg { width: 19px; height: 19px; }

    /* Miniaturas de galería debajo de la imagen */
    .ini-producto-modal-galeria { padding: var(--fv-s-3) var(--fv-s-4) 0; gap: 8px; }
    .ini-producto-modal-galeria img { width: 46px; height: 46px; border-radius: 10px; border-width: 2px; }
    .ini-producto-modal-galeria img.ini-activa { border-color: var(--fv-blue); }

    /* Columna de información */
    .ini-producto-modal-info { padding: var(--fv-s-4) var(--fv-s-4) 0 !important; }
    .ini-producto-modal-info .producto-card-tienda {
        margin: 0 0 4px;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--fv-soft);
    }
    .ini-producto-modal-info h3 {
        font-family: var(--fv-font);
        font-size: 22px;
        font-weight: 800;
        line-height: 1.25;
        color: var(--fv-ink);
        padding-right: 0;
        margin: 0 0 var(--fv-s-3);
    }
    /* Badges: chip en línea dentro de la info (no una franja a lo ancho
       ni flotando sobre la imagen chocando con el botón de cerrar).
       Los !important son a propósito: inicio.css redefine
       .producto-card-badges { flex-direction: column } y carga después. */
    .ini-modal-badges {
        position: static !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 5px;
        margin: 0 0 var(--fv-s-2);
        width: 100%;
    }
    .ini-modal-badges .producto-card-badge {
        display: inline-flex !important;
        align-items: center;
        width: auto !important;
        flex: 0 0 auto !important;
        align-self: flex-start !important;
        box-shadow: none;
        background-image: none;
        padding: 4px 10px;
        border-radius: var(--fv-r-pill, 999px);
        font-size: 10px;
    }
    .ini-modal-precio,
    .ini-modal-precio.en-promocion .producto-card-precio-actual {
        font-size: 27px;
        font-weight: 800;
        color: var(--fv-ink);
    }
    .ini-modal-precio { margin-bottom: 2px; }
    .ini-modal-precio .producto-card-precio-antes { font-size: 14px; color: var(--fv-soft); }
    /* "En promoción" es redundante con el badge "OFERTA" — se oculta en
       el precio del modal en celular. */
    .ini-modal-precio .producto-card-promo-badge { display: none; }

    /* Especificaciones en tabla */
    .ini-producto-modal-detalles {
        display: grid;
        grid-template-columns: minmax(34%, max-content) 1fr;
        gap: 0;
        margin: var(--fv-s-4) 0 0;
        border: 1px solid var(--fv-border);
        border-radius: var(--fv-r-md);
        overflow: hidden;
        font-size: 13px;
    }
    .ini-producto-modal-detalles dt,
    .ini-producto-modal-detalles dd {
        padding: 9px 12px;
        border-top: 1px solid var(--fv-border);
        margin: 0;
    }
    .ini-producto-modal-detalles dt:first-of-type,
    .ini-producto-modal-detalles dt:first-of-type + dd { border-top: none; }
    .ini-producto-modal-detalles dt { color: var(--fv-muted); font-weight: 600; background: var(--fv-surface); }
    .ini-producto-modal-detalles dd { color: var(--fv-ink); }

    /* CTA fijo abajo: solo cantidad + "Agregar · $X" */
    .ini-producto-modal-acciones {
        position: sticky;
        bottom: 0;
        margin: var(--fv-s-4) calc(var(--fv-s-4) * -1) 0;
        padding: 12px var(--fv-s-4) calc(12px + env(safe-area-inset-bottom));
        background: #fff;
        border-top: 1px solid var(--fv-border);
        box-shadow: 0 -8px 20px -8px rgba(10,30,60,.12);
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: var(--fv-s-3);
    }
    .ini-producto-modal-acciones #ini-modal-perfil { display: none; }
    .ini-producto-modal-acciones #ini-modal-compartir:not(.ini-modal-compartir-flotante) { display: none; }
    .ini-producto-modal-acciones .selector-cantidad-modal { order: -1; flex: 0 0 auto; }
    .ini-producto-modal-acciones .btn-mkt-primary {
        flex: 1 1 auto;
        min-width: 0;
        height: 48px;
        font-size: 14px;
    }
}

/* ==========================================================================
   AVISO DE COOKIES (2026-10) — "Rechazar" y "Aceptar" con el MISMO peso visual
   (mismo tamaño, borde y color): la decisión no debe empujarse hacia ninguna opción.
   ========================================================================== */
.aviso-cookies {
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    z-index: 10001; /* por encima de la decoración de temporada (z-index 9999) */
    width: min(760px, calc(100% - 24px));
    display: flex;
    align-items: center;
    gap: var(--space-4, 16px);
    padding: var(--space-4, 16px) var(--space-5, 20px);
    background: var(--white, #fff);
    color: var(--ink, #0A1E3C);
    border: 1px solid var(--surface-3, #E1E8F0);
    border-radius: var(--r-lg, 16px);
    box-shadow: 0 18px 50px -12px rgba(10, 30, 60, .35);
    animation: avisoCookiesEntrada .35s ease-out;
}
@keyframes avisoCookiesEntrada { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
.aviso-cookies-texto { flex: 1; min-width: 0; }
.aviso-cookies-texto p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-muted, #5A6B85); }
.aviso-cookies-texto .aviso-cookies-titulo { font-size: 14.5px; font-weight: 800; color: var(--ink, #0A1E3C); margin-bottom: 3px; }
.aviso-cookies-texto a { color: var(--brand, #005BAA); font-weight: 700; text-decoration: underline; }
.aviso-cookies-botones { display: flex; gap: 10px; flex-shrink: 0; }
.aviso-cookies-btn {
    min-width: 108px;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1.5px solid var(--brand, #005BAA);
    background: var(--white, #fff);
    color: var(--brand, #005BAA);
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.aviso-cookies-btn:hover, .aviso-cookies-btn:focus-visible { background: var(--brand, #005BAA); color: #fff; }
@media (max-width: 760px) {
    /* por encima de la barra inferior fija del celular */
    /* Versión compacta: ocupa lo mínimo para no tapar el producto ni el botón de comprar cuando llegan desde un anuncio. */
    .aviso-cookies { bottom: 70px; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px; border-radius: 14px; }
    .aviso-cookies-texto .aviso-cookies-titulo { display: none; }
    .aviso-cookies-texto p { font-size: 12px; line-height: 1.4; }
    .aviso-cookies-botones { width: 100%; gap: 8px; }
    .aviso-cookies-btn { flex: 1; min-width: 0; padding: 8px 10px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .aviso-cookies { animation: none; } }