:root {
  --mmis-bg: #ffffff;
  --mmis-bg-2: #f6f7fa;
  --mmis-bg-3: #eef0f5;
  --mmis-tx: #111827;
  --mmis-tx-2: #4b5563;
  --mmis-tx-3: #9ca3af;
  --mmis-ac: #3a3972;
  --mmis-bdr: rgba(0,0,0,.08);
}

/*
 * Matmap Instant Search AI — v5.1 · Diseño 2026 Premium
 * CHANGELOG v5.1:
 *  - Desktop: panel al 80% del ancho de pantalla
 *  - Mobile: filtros visibles como chips horizontales
 *  - Primer botón de filtro no se corta
 *  - Categorías con imagen mejoradas
 *  - Cards mobile más grandes
 */

.mmis {
  --ac: #3a3972; --ac-h: #2e2d5c; --ac-rgb: 58,57,114;
  --gold: #d4820a; --gold-l: rgba(212,130,10,.1);
  --bg: #fff; --bg-2: #f6f7fa; --bg-3: #eef0f5;
  --tx: #111827; --tx-2: #4b5563; --tx-3: #9ca3af;
  --bdr: rgba(0,0,0,.08); --bdr-f: rgba(var(--ac-rgb),.26);
  --sh-panel: 0 32px 80px rgba(0,0,0,.13), 0 4px 16px rgba(0,0,0,.06);
  --r: 10px; --r-sm: 7px; --r-lg: 16px; --pill: 100px;
  --ease: cubic-bezier(.4,0,.2,1); --t: .14s; --t-md: .22s;
  --green: #059669; --red: #dc2626;
  --cat-bg: rgba(5,150,105,.07); --cat-c: #047857;
  --tag-bg: rgba(180,83,9,.07); --tag-c: #92400e;
  --brand-bg: rgba(109,40,217,.07); --brand-c: #6d28d9;
  position: relative; width: 100%; font-family: inherit;
  color: var(--tx); box-sizing: border-box; color-scheme: light only;
}
.mmis *, .mmis *::before, .mmis *::after {
  box-sizing: inherit; margin: 0; padding: 0; color-scheme: light only;
}

/* CAMPO */
.mmis__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.mmis__field {
  display: flex; align-items: center; gap: 8px; padding: 0 14px; height: 46px;
  background: var(--bg); border: 1.5px solid var(--bdr); border-radius: var(--pill);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease);
  position: relative;
}
.mmis__field:focus-within { border-color: var(--bdr-f); box-shadow: 0 0 0 4px rgba(var(--ac-rgb),.07); }
.mmis__searchIcon { flex-shrink: 0; width: 16px; height: 16px; color: var(--tx-3); pointer-events: none; transition: color var(--t) var(--ease); }
.mmis__field:focus-within .mmis__searchIcon { color: var(--ac); }
.mmis__input {
  flex: 1 1 auto; border: none; outline: none; background: transparent;
  font-size: 14px; line-height: 1; color: var(--tx); min-width: 0;
  font-family: inherit; height: 100%; -webkit-appearance: none; appearance: none;
}
.mmis__input::-webkit-search-cancel-button, .mmis__input::-webkit-search-decoration,
.mmis__input::-webkit-search-results-button, .mmis__input::-webkit-search-results-decoration { -webkit-appearance: none; display: none; }
.mmis__input::-ms-clear, .mmis__input::-ms-reveal { display: none; }
.mmis__input::placeholder { color: var(--tx-3); font-size: 13.5px; }
.mmis__spinner {
  flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--bg-3); border-top-color: var(--ac); display: none;
  animation: mmis-spin .5s linear infinite;
}
.mmis.is-loading .mmis__spinner { display: block; }
@keyframes mmis-spin { to { transform: rotate(360deg); } }
.mmis__clear, .mmis__close {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border: none; background: var(--bg-2); border-radius: 50%;
  cursor: pointer; color: var(--tx-3);
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
  padding: 0; opacity: 0; pointer-events: none; -webkit-tap-highlight-color: transparent;
}
.mmis__clear:hover, .mmis__close:hover { background: var(--bg-3); color: var(--tx); }
.mmis__input:not(:placeholder-shown) ~ .mmis__clear { opacity: 1; pointer-events: auto; }
.mmis__close { display: none; }
.mmis__ghost {
  position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none;
  display: flex; align-items: center; padding: 0 12px 0 37px;
  font-size: 15px; color: transparent; white-space: nowrap; overflow: hidden;
  opacity: 0; transition: opacity .12s ease;
}
.mmis__ghost.is-visible { opacity: 1; }
.mmis__ghost::after { content: attr(data-ghost); color: var(--tx-3); font-style: italic; }

/* PANEL — 80% DE PANTALLA EN DESKTOP */
.mmis__panel {
  position: fixed; left: 0; right: 0; margin: 0 auto;
  width: 80vw; max-width: 1400px; min-width: 640px;
  max-height: 84vh; overflow-y: auto; overflow-x: visible;
  background: var(--bg); border: 1px solid rgba(0,0,0,.07);
  border-radius: var(--r-lg); box-shadow: var(--sh-panel);
  /* z-index máximo: por encima de headers, modales y cualquier overlay del sitio */
  z-index: 2147483600; animation: mmis-in .16s var(--ease) both;
  will-change: transform; scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.08) transparent; color-scheme: light only;
}
.mmis__panel::-webkit-scrollbar { width: 4px; }
.mmis__panel::-webkit-scrollbar-track { background: transparent; }
.mmis__panel::-webkit-scrollbar-thumb { background: rgba(0,0,0,.1); border-radius: 2px; }
@keyframes mmis-in {
  from { opacity: 0; transform: translateY(-8px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.mmis__panelClose {
  display: none; position: absolute; top: 12px; right: 14px;
  align-items: center; gap: 4px; padding: 5px 12px;
  background: var(--bg-2); border: 1px solid var(--bdr); border-radius: var(--pill);
  font-size: 11px; font-weight: 600; color: var(--tx-2); cursor: pointer; z-index: 22;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.mmis__panelClose:hover { background: rgba(220,38,38,.06); color: var(--red); border-color: rgba(220,38,38,.18); }
@media (min-width: 981px) { .mmis__panelClose { display: flex; } }

/* STICKY HEADER */
/* STICKY HEADER — NO z-index numérico para no crear stacking context que corte dropdowns */
.mmis__stickyHeader {
  position: sticky; top: 0;
  /* isolation:isolate permite sticky sin crear stacking context clipping */
  isolation: isolate;
  background: var(--bg); border-bottom: 1px solid var(--bdr);
  overflow: visible;
  /* z-index solo para quedar por encima del scroll de productos */
  z-index: 10;
}
.mmis__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px 18px 10px; }
.mmis__count { font-size: 10.5px; font-weight: 700; color: var(--ac); text-transform: uppercase; letter-spacing: .07em; opacity: .7; }
.mmis__moreLink { font-size: 12px; font-weight: 700; color: var(--ac); text-decoration: none; margin-left: auto; opacity: .7; transition: opacity var(--t) var(--ease); }
.mmis__moreLink:hover { opacity: 1; text-decoration: underline; }
.mmis__correction {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--pill);
  background: rgba(5,150,105,.06); border: 1px solid rgba(5,150,105,.14); font-size: 11px; color: var(--green); font-style: italic;
}

/* FILTROS — FIX COMPLETO */
.mmis__filters { padding: 9px 18px 11px; border-bottom: 1px solid var(--bdr); background: var(--bg); overflow: visible; }
.mmis__filtersBar { display: flex; flex-direction: column; gap: 7px; overflow: visible; }
.mmis__filterGroups {
  display: flex; flex-wrap: wrap; gap: 5px; align-items: center;
  /* FIX: padding para que el primer botón nunca se corte */
  padding: 2px 0;
  overflow: visible;
}
.mmis__filterGroup { position: relative; overflow: visible; z-index: 20; }
.mmis__filterBtn {
  display: inline-flex; align-items: center; gap: 5px; padding: 0 12px; height: 32px;
  background: var(--bg-2); border: 1.5px solid var(--bdr); border-radius: var(--pill);
  font-size: 12px; font-weight: 600; color: var(--tx-2); cursor: pointer; white-space: nowrap;
  transition: all var(--t) var(--ease); -webkit-tap-highlight-color: transparent; user-select: none;
}
.mmis__filterBtn:hover { border-color: rgba(var(--ac-rgb),.3); background: rgba(var(--ac-rgb),.05); color: var(--ac); }
.mmis__filterBtn.is-open { border-color: var(--ac); background: rgba(var(--ac-rgb),.06); color: var(--ac); box-shadow: 0 0 0 3px rgba(var(--ac-rgb),.07); }
.mmis__filterBtn.is-active { background: var(--ac); border-color: var(--ac); color: #fff; }
.mmis__filterBtn.is-active:hover { background: var(--ac-h); }
.mmis__filterBadge {
  min-width: 15px; height: 15px; padding: 0 3px; background: rgba(255,255,255,.3); border-radius: 8px;
  font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.mmis__filterChev { transition: transform var(--t) var(--ease); }
.mmis__filterBtn.is-open .mmis__filterChev { transform: rotate(180deg); }
.mmis__filterDropdown {
  position: absolute; top: calc(100% + 4px); left: 0;
  min-width: 190px; max-width: 260px; max-height: 260px; overflow-y: auto;
  background: #ffffff; border: 1px solid rgba(0,0,0,.09); border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.05);
  z-index: 50; padding: 4px 0; scrollbar-width: thin;
  animation: mmis-in .13s cubic-bezier(.4,0,.2,1) both;
}
.mmis__filterOpt {
  display: flex; align-items: center; gap: 9px; padding: 8px 12px; cursor: pointer;
  font-size: 12.5px; color: var(--tx); transition: background var(--t) var(--ease);
  min-height: 40px; user-select: none; -webkit-tap-highlight-color: transparent;
}
.mmis__filterOpt:hover { background: var(--bg-2); }
.mmis__filterOpt input[type=checkbox] { display: none; }
.mmis__filterOptBox {
  flex-shrink: 0; width: 16px; height: 16px; border: 1.5px solid #c5cdd8;
  border-radius: 4px; background: var(--bg); transition: all var(--t) var(--ease); position: relative;
}
.mmis__filterOpt:hover .mmis__filterOptBox { border-color: var(--ac); }
.mmis__filterOpt.is-checked .mmis__filterOptBox,
.mmis__filterOpt input:checked ~ .mmis__filterOptBox { background: var(--ac); border-color: var(--ac); }
.mmis__filterOpt.is-checked .mmis__filterOptBox::after,
.mmis__filterOpt input:checked ~ .mmis__filterOptBox::after {
  content: ''; position: absolute; left: 3.5px; top: 1px; width: 5px; height: 8px;
  border: 2px solid #fff; border-top: none; border-left: none; transform: rotate(45deg);
}
.mmis__filterOptLabel { flex: 1; font-weight: 500; }
.mmis__filterOptCount { font-size: 10.5px; color: var(--tx-3); background: var(--bg-2); padding: 1px 6px; border-radius: var(--pill); }
.mmis__filterPills { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.mmis__filterPill {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px;
  background: rgba(var(--ac-rgb),.07); border: 1.5px solid rgba(var(--ac-rgb),.2);
  border-radius: var(--pill); font-size: 11.5px; font-weight: 600; color: var(--ac);
  cursor: pointer; transition: all var(--t) var(--ease); -webkit-tap-highlight-color: transparent;
}
.mmis__filterPill:hover { background: rgba(220,38,38,.07); border-color: rgba(220,38,38,.2); color: var(--red); }
.mmis__filterClearAll {
  font-size: 11px; color: var(--tx-3); background: none; border: none;
  cursor: pointer; padding: 3px 4px; text-decoration: underline; transition: color var(--t) var(--ease);
}
.mmis__filterClearAll:hover { color: var(--red); }

/* TÉRMINOS */
.mmis__terms { padding: 9px 18px; border-bottom: 1px solid var(--bdr); background: var(--bg-2); }
.mmis__termsRow { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.mmis__termsGroup { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.mmis__termsGroupLabel { font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tx-3); white-space: nowrap; }
.mmis__termsDivider { width: 1px; height: 11px; background: var(--bdr); flex-shrink: 0; margin: 0 4px; }
.mmis__termLink {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 5px;
  border-radius: var(--pill); border: 1px solid var(--bdr); background: var(--bg);
  text-decoration: none; color: var(--tx); font-size: 12px; font-weight: 500; white-space: nowrap;
  transition: all var(--t) var(--ease); min-height: 32px; -webkit-tap-highlight-color: transparent;
}
.mmis__termLink:hover { border-color: var(--ac); background: rgba(var(--ac-rgb),.05); color: var(--ac); }
.mmis__termLink--cat:hover { background: var(--cat-bg); border-color: var(--cat-c); color: var(--cat-c); }
.mmis__termLink--tag:hover { background: var(--tag-bg); border-color: var(--tag-c); color: var(--tag-c); }
.mmis__termLink--brand:hover { background: var(--brand-bg); border-color: var(--brand-c); color: var(--brand-c); }
.mmis__termImg { width: 20px; height: 20px; border-radius: 5px; object-fit: cover; flex-shrink: 0; }
.mmis__termIcon { width: 20px; height: 20px; border-radius: 5px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; }
.mmis__termIcon--cat { background: var(--cat-bg); color: var(--cat-c); }
.mmis__termIcon--tag { background: var(--tag-bg); color: var(--tag-c); }
.mmis__termIcon--brand { background: var(--brand-bg); color: var(--brand-c); }
.mmis__termIcon--other { background: rgba(var(--ac-rgb),.08); color: var(--ac); }
.mmis__termName { font-size: 12px; font-weight: 600; }
.mmis__termCount { font-size: 10px; color: var(--tx-3); background: var(--bg-2); padding: 1px 5px; border-radius: var(--pill); }

/* SECCIONES */
.mmis__section { padding: 0; }
.mmis__section--sep { border-top: 6px solid var(--bg-2); }
.mmis__sectionHeader { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 10px; gap: 10px; }
.mmis__sectionTitleWrap { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.mmis__sectionTitle { font-size: 14px; font-weight: 800; color: var(--ac); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mmis__sectionCount { font-size: 11px; color: var(--tx-3); font-weight: 500; flex-shrink: 0; }
.mmis__sectionCatLink {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700;
  color: var(--ac); text-decoration: none; white-space: nowrap; flex-shrink: 0;
  padding: 4px 11px; border: 1.5px solid rgba(var(--ac-rgb),.2); border-radius: var(--pill);
  transition: all var(--t) var(--ease);
}
.mmis__sectionCatLink:hover { background: rgba(var(--ac-rgb),.06); border-color: var(--ac); }
.mmis__sectionGrid { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 12px; padding: 0 20px 20px; }

/* CARD */
.mmis__card {
  display: flex; flex-direction: column; text-decoration: none; color: var(--tx);
  border-radius: var(--r); border: 1px solid var(--bdr); overflow: hidden; background: var(--bg);
  transition: border-color var(--t-md) var(--ease), box-shadow var(--t-md) var(--ease), transform var(--t-md) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.mmis__card:hover { border-color: rgba(var(--ac-rgb),.22); box-shadow: 0 8px 28px rgba(var(--ac-rgb),.11); transform: translateY(-3px); }
.mmis__card:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
.mmis__cardImgWrap { background: var(--bg-2); aspect-ratio: 4/3; overflow: hidden; position: relative; flex-shrink: 0; }
.mmis__cardImg { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .32s var(--ease); }
.mmis__card:hover .mmis__cardImg { transform: scale(1.05); }
.mmis__cardNoImg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--tx-3); opacity: .25; }
.mmis__cardNoImg svg { width: 35%; height: 35%; }
.mmis__badges { position: absolute; top: 7px; left: 7px; display: flex; flex-direction: column; gap: 3px; pointer-events: none; }
.mmis__badge { display: inline-block; padding: 2px 6px; border-radius: var(--pill); font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1.7; }
.mmis__badge--sale { background: var(--red); color: #fff; }
.mmis__badge--new  { background: var(--green); color: #fff; }
.mmis__badge--out  { background: var(--tx-3); color: #fff; }
.mmis__cardBody { padding: 10px 11px 12px; flex: 1; display: flex; flex-direction: column; gap: 5px; background: var(--bg); }
.mmis__cardTitle { font-size: 12px; font-weight: 700; line-height: 1.38; color: var(--ac); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mmis__hl { background: var(--gold-l); color: #92400e; border-radius: 2px; padding: 0 1px; }
.mmis__cardPrice { font-size: 11.5px; font-weight: 700; color: var(--gold); line-height: 1.2; margin-top: 1px; }
.mmis__cardPrice del { font-size: 10px; color: var(--tx-3); text-decoration: line-through; margin-right: 2px; font-weight: 400; }
.mmis__cardPrice ins { text-decoration: none; color: var(--red); }
.mmis__cardBtn {
  display: block; text-align: center; padding: 7px 8px; margin-top: auto;
  background: var(--ac); color: #fff; border-radius: var(--r-sm);
  font-size: 11px; font-weight: 700; letter-spacing: .025em; pointer-events: none;
  transition: background var(--t) var(--ease);
}
.mmis__card:hover .mmis__cardBtn { background: var(--ac-h); }

/* PANEL HOME */
.mmis__recentWrap { padding: 16px 18px 0; }
.mmis__trendingWrap { padding: 0; }
.mmis__homeSection { padding: 12px 18px 4px; }
.mmis__homeSection + .mmis__homeSection { border-top: 1px solid var(--bdr); padding-top: 12px; }
.mmis__homeSection--products { padding-bottom: 0; }
.mmis__homeSectionTitle { display: flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tx-3); margin-bottom: 11px; }
.mmis__homeSectionTitle svg { flex-shrink: 0; color: var(--ac); opacity: .6; }
.mmis__recentList { list-style: none; display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.mmis__recentItem { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: var(--pill); border: 1px solid var(--bdr); background: var(--bg); cursor: pointer; font-size: 12.5px; color: var(--tx); transition: all var(--t) var(--ease); min-height: 34px; user-select: none; -webkit-tap-highlight-color: transparent; }
.mmis__recentItem:hover, .mmis__recentItem:focus { border-color: var(--ac); background: rgba(var(--ac-rgb),.05); color: var(--ac); outline: none; }
.mmis__recentItem svg { color: var(--tx-3); flex-shrink: 0; }
.mmis__recentClear { background: none; border: none; cursor: pointer; display: block; font-size: 11px; color: var(--tx-3); padding: 4px 0 10px; text-decoration: underline; transition: color var(--t) var(--ease); }
.mmis__recentClear:hover { color: var(--red); }
.mmis__trendingQueries { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 18px 12px; }
.mmis__trendingQuery { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px 5px 5px; border-radius: var(--pill); border: 1px solid var(--bdr); background: var(--bg); cursor: pointer; font-size: 12px; transition: all var(--t) var(--ease); min-height: 32px; -webkit-tap-highlight-color: transparent; }
.mmis__trendingQuery:hover { border-color: var(--ac); background: rgba(var(--ac-rgb),.05); color: var(--ac); }
.mmis__trendingRank { width: 18px; height: 18px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 8px; font-weight: 800; color: var(--tx-3); background: var(--bg-2); }
.mmis__trendingQueries li:nth-child(1) .mmis__trendingRank { background: #fef3c7; color: #92400e; }
.mmis__trendingQueries li:nth-child(2) .mmis__trendingRank { background: #f1f5f9; color: #475569; }
.mmis__trendingQueries li:nth-child(3) .mmis__trendingRank { background: #fde8d8; color: #9a3412; }
.mmis__trendingBadge { font-size: 9px; font-weight: 700; margin-left: 3px; padding: 1px 4px; border-radius: var(--pill); background: rgba(239,68,68,.08); color: var(--red); }
.mmis__trendingGrid { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 12px; padding: 0 20px 20px; }

/* SIN RESULTADOS */
.mmis__emptyWrap { border-bottom: 1px solid var(--bdr); }
.mmis__empty { padding: 48px 24px 40px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.mmis__emptyIconWrap { width: 64px; height: 64px; border-radius: 50%; background: var(--bg-2); display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.mmis__emptyIcon { width: 30px; height: 30px; color: var(--tx-3); }
.mmis__emptyTitle { font-size: 14px; font-weight: 600; color: var(--tx-2); }
.mmis__emptyQuery { font-size: 18px; font-weight: 700; color: var(--tx); }
.mmis__emptyHint { font-size: 13px; color: var(--tx-3); max-width: 280px; line-height: 1.6; }
.mmis__sectionHeader--fallback { padding: 14px 18px 8px; }
.mmis__sectionTitle--fallback { font-size: 12px; font-weight: 600; color: var(--tx-2); display: flex; align-items: center; gap: 5px; }
.mmis__correctBtn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--pill); background: rgba(5,150,105,.07); border: 1px solid rgba(5,150,105,.16); color: var(--green); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .14s ease; font-family: inherit; }
.mmis__correctBtn:hover { background: rgba(5,150,105,.13); }
.mmis__correctBtn strong { text-decoration: underline; }

/* FOOTER */
.mmis__footer { display: flex; align-items: center; justify-content: space-between; padding: 11px 18px 13px; border-top: 1px solid var(--bdr); background: var(--bg-2); position: sticky; bottom: 0; gap: 12px; border-radius: 0 0 var(--r-lg) var(--r-lg); }
.mmis__footerBtn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border-radius: var(--r-sm); background: var(--ac); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .02em; text-decoration: none; transition: background var(--t) var(--ease), transform var(--t) var(--ease); -webkit-tap-highlight-color: transparent; min-height: 38px; }
.mmis__footerBtn:hover { background: var(--ac-h); color: #fff; transform: translateY(-1px); }
.mmis__footerHint { font-size: 11px; color: var(--tx-3); display: flex; align-items: center; gap: 8px; }
.mmis__kbd { display: inline-block; padding: 2px 5px; border-radius: 4px; font-family: monospace; font-size: 10px; color: var(--tx-2); background: rgba(0,0,0,.04); border: 1px solid rgba(0,0,0,.08); }
.mmis__footerBrand { font-size: 11px; color: var(--tx-3); font-weight: 500; letter-spacing: .02em; flex-shrink: 0; }

/* INTENT BANNER */
.mmis__intentBanner { display: flex; align-items: center; gap: 8px; margin: 10px 16px 0; padding: 7px 11px; border-radius: var(--r-sm); font-size: 12px; font-weight: 500; animation: mmis-in .16s ease both; }
.mmis__intentBanner--info  { background: rgba(14,165,233,.06); color: #0369a1; border: 1px solid rgba(14,165,233,.14); }
.mmis__intentBanner--cat   { background: var(--cat-bg); color: var(--cat-c); border: 1px solid rgba(5,150,105,.14); }
.mmis__intentBanner--attr  { background: rgba(124,58,237,.06); color: #6d28d9; border: 1px solid rgba(124,58,237,.14); }
.mmis__intentBanner--brand { background: rgba(234,179,8,.07); color: #92400e; border: 1px solid rgba(234,179,8,.17); }
.mmis__intentBanner--nav   { background: var(--bg-2); color: var(--tx-2); border: 1px solid var(--bdr); }
.mmis__intentIcon { font-size: 13px; flex-shrink: 0; }
.mmis__intentText { flex: 1; line-height: 1.3; }
.mmis__intentClose { flex-shrink: 0; background: none; border: none; cursor: pointer; color: inherit; opacity: .45; padding: 2px; display: flex; align-items: center; border-radius: 4px; transition: opacity .12s; }
.mmis__intentClose:hover { opacity: 1; }

/* PÁGINAS */
.mmis__usePages { padding: 10px 18px 12px; border-bottom: 1px solid var(--bdr); background: var(--bg-2); }
.mmis__usePagesTitle { display: flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tx-3); margin-bottom: 8px; }
.mmis__usePagesTitle svg { color: var(--ac); }
.mmis__usePagesList { display: flex; flex-direction: column; gap: 4px; }
.mmis__usePageLink { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--bg); border: 1px solid var(--bdr); border-radius: var(--r-sm); text-decoration: none; color: var(--tx); transition: all var(--t) var(--ease); min-height: 42px; }
.mmis__usePageLink:hover { border-color: rgba(var(--ac-rgb),.22); background: rgba(var(--ac-rgb),.04); }
.mmis__usePageIcon { flex-shrink: 0; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: rgba(var(--ac-rgb),.07); border-radius: 6px; color: var(--ac); }
.mmis__usePageText { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mmis__usePageName { font-size: 12.5px; font-weight: 600; color: var(--tx); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mmis__usePageDesc { font-size: 11px; color: var(--tx-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mmis__usePageArrow { flex-shrink: 0; color: var(--tx-3); transition: transform var(--t) var(--ease), color var(--t) var(--ease); }
.mmis__usePageLink:hover .mmis__usePageArrow { transform: translateX(3px); color: var(--ac); }

/* RELACIONADOS */
.mmis__relatedSection { border-top: 1px solid var(--bdr); padding: 12px 18px 10px; background: var(--bg-2); }
.mmis__relatedHeader { display: flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--tx-2); margin-bottom: 10px; }
.mmis__relatedGrid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.mmis__card--related .mmis__cardBtn { display: none; }
.mmis__card--related .mmis__cardTitle { font-size: 11px; }

/* SKELETON */
.mmis__skeleton, .mmis__skeleton--trending { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 12px; padding: 12px 20px 20px; }
.mmis__skeletonCard { border-radius: var(--r); overflow: hidden; border: 1px solid var(--bdr); }
.mmis__skeletonImg, .mmis__skeletonLine { animation: mmis-shimmer 1.5s linear infinite; background: linear-gradient(90deg, #f0f1f4 25%, #e6e8ec 50%, #f0f1f4 75%); background-size: 200% 100%; }
.mmis__skeletonImg { aspect-ratio: 4/3; }
.mmis__skeletonLine { height: 8px; border-radius: 4px; margin: 8px 10px 4px; }
.mmis__skeletonLine--short { width: 55%; }
.mmis__skeletonLine--price { height: 10px; width: 40%; margin-top: 2px; }
.mmis__skeletonLine--btn { height: 26px; margin: 6px 10px 10px; border-radius: var(--r-sm); }
@keyframes mmis-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.mmis.is-loading .mmis__sectionGrid { opacity: .38; transition: opacity .14s; }

/* BOTTOM SHEET */
.mmis-filter-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.46); z-index: 2147483640; touch-action: none; animation: mmis-fadein .18s cubic-bezier(.4,0,.2,1); }
.mmis-filter-overlay.is-visible { display: block; }
.mmis-filter-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483647;
  background: #ffffff; border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 48px rgba(0,0,0,.18);
  max-height: 78vh; overflow: hidden;
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.32,0,.08,1);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #111827;
}
.mmis-filter-sheet.is-open { transform: translateY(0); }
.mmis-fs__handle { width: 40px; height: 4px; background: rgba(0,0,0,.1); border-radius: 2px; margin: 14px auto 0; flex-shrink: 0; }
.mmis-fs__header { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px 10px; border-bottom: 1px solid rgba(0,0,0,.06); flex-shrink: 0; background: #ffffff; }
.mmis-fs__title { font-size: 16px; font-weight: 700; color: #111827; }
.mmis-fs__close { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; background: #f6f7fa; border-radius: 50%; cursor: pointer; color: #4b5563; transition: background .14s ease; -webkit-tap-highlight-color: transparent; }
.mmis-fs__close:hover { background: #eef0f5; color: #111827; }
.mmis-fs__body { overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.mmis-fs__opt { display: flex; align-items: center; gap: 13px; padding: 13px 18px; cursor: pointer; font-size: 15px; color: #111827; border-bottom: 1px solid rgba(0,0,0,.05); min-height: 54px; user-select: none; -webkit-tap-highlight-color: transparent; transition: background .12s ease; }
.mmis-fs__opt:last-child { border-bottom: none; }
.mmis-fs__opt:active { background: #f6f7fa; }
.mmis-fs__optBox { flex-shrink: 0; width: 24px; height: 24px; border: 1.5px solid #c5cdd8; border-radius: 6px; background: #ffffff; display: flex; align-items: center; justify-content: center; transition: all .14s ease; position: relative; }
.mmis-fs__opt.is-checked .mmis-fs__optBox { background: #3a3972; border-color: #3a3972; }
.mmis-fs__check { opacity: 0; color: #fff; transition: opacity .1s ease; position: absolute; }
.mmis-fs__opt.is-checked .mmis-fs__check { opacity: 1; }
.mmis-fs__optLabel { flex: 1; font-weight: 500; line-height: 1.3; }
.mmis-fs__optCount { font-size: 12px; color: #9ca3af; background: #f6f7fa; padding: 2px 8px; border-radius: 100px; font-weight: 500; flex-shrink: 0; }
html.mmis-sheet-open body { overflow: hidden !important; }

@keyframes mmis-fadein { from{opacity:0} to{opacity:1} }

/* MOBILE */
.mmis-backdrop { display: none; pointer-events: none; }

@media (max-width: 980px) {
  .mmis__panel {
    position: fixed; inset: 0; width: 100%; max-width: 100%; min-width: 0;
    left: 0; transform: none; border-radius: 0; max-height: 100dvh;
    background: var(--bg); z-index: 2147483600; animation: none;
  }
  html.mmis-lock .mmis-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 2147483599; pointer-events: auto; animation: mmis-fadein .18s var(--ease); }
  .mmis.is-overlay-open { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 2147483600; background: var(--bg); display: flex; flex-direction: column; pointer-events: auto; }
  html.mmis-lock, html.mmis-lock body { overflow: hidden !important; touch-action: none; }
  .mmis.is-overlay-open .mmis__close { display: flex; opacity: 1; pointer-events: auto; }
  .mmis.is-overlay-open .mmis__clear { display: none !important; }
  .mmis.is-overlay-open .mmis__field { flex-shrink: 0; margin: 12px 12px 0; height: 50px; border-radius: var(--r); }
  .mmis.is-overlay-open .mmis__panel { position: static; flex: 1; inset: auto; transform: none; max-height: none; width: 100%; max-width: none; border: none; border-radius: 0; box-shadow: none; background: var(--bg); animation: none; pointer-events: auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .mmis.is-overlay-open .mmis__footerHint { display: none; }
  .mmis.is-overlay-open .mmis__footer { border-radius: 0; }
  .mmis.is-overlay-open .mmis__footerBtn { flex: 1; justify-content: center; }
  .mmis__panelClose { display: none !important; }

  /* Grid mobile: 2 columnas */
  .mmis__sectionGrid, .mmis__trendingGrid { grid-template-columns: repeat(2,1fr); gap: 10px; padding: 0 12px 16px; }
  .mmis__skeleton, .mmis__skeleton--trending { grid-template-columns: repeat(2,1fr); gap: 10px; padding: 12px; }

  /* Cards mobile mejoradas */
  .mmis__sectionGrid .mmis__cardImgWrap,
  .mmis__trendingGrid .mmis__cardImgWrap { aspect-ratio: 1/1; }
  .mmis__sectionGrid .mmis__cardTitle { font-size: 13px; }
  .mmis__sectionGrid .mmis__cardPrice { font-size: 13px; }
  .mmis__sectionGrid .mmis__cardBtn   { font-size: 12px; padding: 9px 8px; }

  .mmis.is-overlay-open .mmis__sectionHeader { padding: 12px 12px 8px; }
  .mmis.is-overlay-open .mmis__meta { padding: 11px 12px 0; }

  /* Terms scroll horizontal */
  .mmis__termsRow { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .mmis__termsRow::-webkit-scrollbar { display: none; }
  .mmis__termsDivider { display: none; }
  .mmis__termsGroup { flex-shrink: 0; flex-wrap: nowrap; }
  .mmis__termsGroupLabel { display: none; }

  /* Terms enriquecidos en mobile */
  .mmis__terms { padding: 8px 0 6px; }
  .mmis__termsRow { padding: 0 12px; gap: 6px; }
  .mmis__termLink { min-height: 38px; padding: 5px 13px 5px 5px; flex-shrink: 0; }
  .mmis__termImg { width: 24px; height: 24px; border-radius: 6px; }
  .mmis__termIcon { width: 24px; height: 24px; border-radius: 6px; }
  .mmis__termName { font-size: 13px; }

  /* ═══════════════════════════════════════════════════════════
     FILTROS MOBILE — FIX DEFINITIVO v5.2
     overflow:hidden JAMÁS en el wrapper — usa mask-image para fade
     ═══════════════════════════════════════════════════════════ */
  .mmis__filters {
    padding: 0;
    /* NUNCA overflow:hidden — cortaría los chips */
    overflow: visible;
  }

  .mmis__filtersBar { gap: 0; }

  /* Fade al final usando mask-image en el propio scroll container */
  .mmis__filterGroups {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 8px 12px 8px 12px;
    gap: 6px;
    align-items: center;
    /* Fade de 32px en el lado derecho sin cortar nada */
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 36px), transparent 100%);
    mask-image: linear-gradient(to right, black calc(100% - 36px), transparent 100%);
  }
  .mmis__filterGroups::-webkit-scrollbar { display: none; }

  /* Chips más grandes y táctiles en mobile */
  .mmis__filterBtn {
    height: 36px;
    font-size: 13px;
    padding: 0 14px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Pills activos — también scrollable */
  .mmis__filterPills {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 12px 8px;
    gap: 5px;
  }
  .mmis__filterPills::-webkit-scrollbar { display: none; }
  .mmis__filterPill { flex-shrink: 0; }

  /* Home sections */
  .mmis__homeSection { padding: 12px 12px 4px; }
  .mmis__recentWrap { padding: 12px 12px 0; }
  .mmis__trendingWrap { padding: 0; }
  .mmis__trendingQueries { padding: 0 12px 10px; }
  .mmis__relatedGrid { grid-template-columns: repeat(2,1fr); }
}

/* DESKTOP: asegurar que los dropdowns siempre salgan visibles */
@media (min-width: 981px) {
  .mmis__stickyHeader,
  .mmis__filters,
  .mmis__filtersBar,
  .mmis__filterGroups,
  .mmis__filterGroup { overflow: visible; }
}