/* ══ /marcas, versión nueva — propuesta 40 (2026-10-11) ═════════════════════════════════════
   Plantilla marcas/indice.html (en prueba: /marcas?plantilla=nueva), JS marcas-indice.js.

   Todo cuelga de `.mi` y con prefijo `mi-`: en producción las clases de Tailwind se renombran
   (tailwindcss-patch) y una clase propia llamada `hidden` o `open` se rompería.

   Son las reglas finales de la propuesta, que venía en capas (P27 → P40): tarjetas sin borde,
   modelos en una sola línea con «+N más», tarjetas de una fila a la misma altura y la fila de
   acciones al fondo. Colores: los de la paleta Pizarra de :root (style.css). */

.mi {
    --mi-ink: var(--ink);
    --mi-ink2: rgb(var(--gris-700));
    --mi-mute: var(--ink-2);
    --mi-soft: rgb(var(--gris-500));
    --mi-faint: rgb(var(--gris-400));
    --mi-bg: var(--surface);
    --mi-bg1: var(--ground);
    --mi-bg2: rgb(var(--gris-100));
    --mi-line: var(--hair);
    --mi-line2: rgb(var(--gris-100));
    --mi-blue: var(--azul);
    --mi-bev: var(--bev);

    /* Sin anclaje de scroll: al añadir tarjetas con «Mostrar más» el navegador anclaba el botón
       (o la lista A–Z) y bajaba la vista todo lo insertado. Las fotos tienen el hueco reservado
       (aspect-ratio, width/height), así que el anclaje no hace falta. */
    overflow-anchor: none;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px 56px;
    color: var(--mi-ink);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
@media (min-width: 640px) { .mi { padding-left: 24px; padding-right: 24px; } }
@media (min-width: 1024px) { .mi { padding-left: 32px; padding-right: 32px; } }

.mi a { color: inherit; text-decoration: none; }
.mi-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mi mark { background: #fef3c7; color: inherit; border-radius: 2px; }
.mi-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mi-bev); }

/* ── Cabecera ─────────────────────────────────────────────────────────────────────────────── */
.mi-vh { padding: 28px 0 0; }
.mi-vh h1 { font-size: 30px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; margin: 6px 0; }
.mi-lead { font-size: 14px; color: var(--mi-mute); max-width: 720px; }

/* ── Buscador y botones ───────────────────────────────────────────────────────────────────── */
.mi-search { display: flex; gap: 8px; margin-top: 20px; }
.mi-in { position: relative; flex: 1; min-width: 0; }
.mi-in input { width: 100%; font: inherit; font-size: 15px; padding: 0 40px 0 14px; height: 44px; border: 1px solid var(--mi-line); border-radius: 6px; background: var(--mi-bg); color: var(--mi-ink); }
.mi-in input:focus { outline: 2px solid var(--mi-ink); outline-offset: -1px; }
.mi-in input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.mi-clr { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--mi-soft); font-size: 20px; line-height: 1; cursor: pointer; padding: 4px 8px; display: none; }
.mi-in.mi-on .mi-clr { display: block; }
.mi-btn { font: inherit; font-size: 14px; font-weight: 600; height: 44px; padding: 0 16px; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; letter-spacing: normal; text-transform: none; }
.mi-btn-dark { background: var(--mi-ink); color: #fff; border: 1px solid var(--mi-ink); }
.mi-btn-line { background: var(--mi-bg); color: var(--mi-ink); border: 1px solid var(--mi-line); }
.mi-btn-line[aria-expanded=true] { border-color: var(--mi-ink); }
.mi-chev { display: inline-block; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.mi-btn[aria-expanded=true] .mi-chev { transform: rotate(-135deg) translate(-2px, 0); }
.mi-cnt { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--mi-ink); color: #fff; font-size: 11px; }
.mi-cnt[hidden] { display: none; }

/* ── Panel de filtros ─────────────────────────────────────────────────────────────────────── */
.mi-fpanel { display: none; padding: 16px 0 4px; }
.mi-fpanel.mi-open { display: block; }
.mi-fgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mi-fld label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mi-ink2); margin-bottom: 6px; }
.mi-fld select, .mi-rb select { width: 100%; font: inherit; font-size: 14px; letter-spacing: normal; text-transform: none; color: var(--mi-ink); height: 40px; padding: 0 10px; border: 1px solid var(--mi-line); border-radius: 6px; background: var(--mi-bg); }
.mi-factions { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-top: 14px; }
.mi-lnk { font: inherit; font-size: 14px; font-weight: 500; color: var(--mi-mute); background: none; border: 0; cursor: pointer; padding: 0; }
.mi-lnk:hover { color: var(--mi-ink); }

/* ── Barra de resultados: recuento, agrupar, ordenar, vista ───────────────────────────────── */
.mi-rbar { border-top: 1px solid var(--mi-line); margin-top: 20px; padding: 14px 0 0; display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap; }
.mi-count { font-size: 14px; color: var(--mi-mute); }
.mi-count b { color: var(--mi-ink); font-weight: 600; }
.mi-rb { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.mi-ctl { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--mi-mute); }
.mi-ctl-g { gap: 10px; }
.mi-rb select { width: auto; min-width: 170px; }
.mi-seg, .mi-grpseg { display: inline-flex; border: 1px solid var(--mi-line); border-radius: 6px; overflow: hidden; height: 40px; }
.mi-seg button, .mi-grpseg button { font: inherit; font-size: 13.5px; font-weight: 600; letter-spacing: normal; text-transform: none; color: var(--mi-mute); background: var(--mi-bg); border: 0; padding: 0 14px; cursor: pointer; white-space: nowrap; }
.mi-grpseg button { font-weight: 500; }
.mi-seg button + button, .mi-grpseg button + button { border-left: 1px solid var(--mi-line); }
.mi-grpseg button:hover { color: var(--mi-ink); }
.mi-seg button[aria-pressed=true], .mi-grpseg button[aria-pressed=true] { background: var(--mi-ink); color: #fff; font-weight: 600; }
.mi-active { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.mi-active:empty { display: none; }
.mi-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; color: var(--mi-ink); background: var(--mi-bg2); border-radius: 999px; padding: 4px 4px 4px 12px; }
.mi-pill button { border: 0; background: none; font-size: 16px; line-height: 1; color: var(--mi-soft); cursor: pointer; padding: 2px 6px; }
.mi-pill button:hover { color: var(--mi-ink); }
.mi-hits { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; font-size: 13px; color: var(--mi-mute); }
.mi-hits:empty { display: none; }
.mi-hits a { font-weight: 600; color: var(--mi-ink); border: 1px solid var(--mi-line); border-radius: 6px; padding: 5px 10px; }
.mi-hits a:hover { border-color: var(--mi-ink); }

/* ── Índice de bloques (al agrupar) ───────────────────────────────────────────────────────── */
.mi-gidx { margin-top: 20px; background: var(--mi-bg1); border: 1px solid var(--mi-line2); border-radius: 8px; padding: 16px; }
.mi-gidx:empty { display: none; }
.mi-gx-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.mi-gx-h b { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mi-ink2); }
.mi-gx-h small { font-size: 12px; color: var(--mi-soft); }
.mi-gx { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mi-gx-t { display: flex; flex-direction: column; gap: 6px; background: var(--mi-bg); border: 1px solid var(--mi-line); border-radius: 6px; padding: 12px 12px 10px; color: var(--mi-ink); }
.mi-gx-t:hover { border-color: var(--mi-ink); }
.mi-gx-n { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.mi-gx-n b { font-size: 14.5px; font-weight: 700; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mi-gx-m { font-size: 12.5px; color: var(--mi-mute); font-variant-numeric: tabular-nums; }
.mi-gx-m b { color: var(--mi-ink); font-weight: 600; }
.mi-gx-b { height: 4px; background: var(--mi-bg2); border-radius: 2px; overflow: hidden; }
.mi-gx-b i { display: block; height: 100%; background: var(--mi-bev); }
.mi-gx-l { display: flex; align-items: center; gap: 6px; min-height: 22px; }
.mi-gx-l svg { width: 22px; height: 22px; filter: grayscale(1); opacity: .85; }
.mi-gx-t:hover .mi-gx-l svg { filter: none; opacity: 1; }
.mi-gx-l em { font-style: normal; font-size: 11.5px; color: var(--mi-soft); margin-left: 2px; }

/* ── Tarjetas ─────────────────────────────────────────────────────────────────────────────── */
#mi-out { margin-top: 24px; }
.mi-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; align-items: stretch; }
.mi-bc { display: flex; flex-direction: column; min-width: 0; background: var(--mi-bg); }
.mi-ph { display: block; position: relative; aspect-ratio: 16 / 9; background: var(--mi-bg2); overflow: hidden; }
.mi-ph img { width: 100%; height: 100%; object-fit: cover; }
.mi-rk { position: absolute; left: 0; top: 0; background: var(--mi-ink); color: #fff; font-size: 11px; font-style: normal; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 6px 10px; border-bottom-right-radius: 6px; }
/* El puesto lo escribe el JS según el orden (ventas, páginas vistas, búsquedas); vacío no se ve. */
.mi-rk:empty { display: none; }
.mi-b { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.mi-t { display: flex; align-items: flex-start; gap: 12px; }
.mi-t > div { min-width: 0; flex: 1; }
.mi-t h3 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.mi-t h3 a:hover { text-decoration: underline; }
.mi-tag { font-size: 15px; font-weight: 600; color: var(--mi-bev); line-height: 1.3; margin-top: 3px; }
.mi-org { font-size: 12.5px; color: var(--mi-soft); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mi-org b { font-weight: 600; color: var(--mi-ink2); }
.mi-lg { flex: none; width: 96px; height: 56px; display: flex; align-items: center; justify-content: center; }
.mi-lg svg { width: 80px; height: 40px; }
.mi-th { display: none; }

/* Cifras: tres columnas iguales mientras quepan; si una cifra no cabe en su tercio (2.662.000 €
   en tarjetas estrechas), su columna crece (1fr = minmax(auto, 1fr), por eso las celdas no llevan
   min-width: 0). El rótulo puede ir en dos líneas y la cifra queda abajo: las tres alineadas. */
.mi-g3 { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 14px; border-top: 1px solid var(--mi-line); border-bottom: 1px solid var(--mi-line); }
.mi-g3 > div { padding: 9px 6px; text-align: center; display: flex; flex-direction: column; justify-content: space-between; }
.mi-g3 > div + div { border-left: 1px solid var(--mi-line); }
.mi-g3 dt { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; line-height: 1.35; text-transform: uppercase; color: var(--mi-soft); }
.mi-g3 dd { font-size: 16px; font-weight: 700; color: var(--mi-ink); margin-top: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mi-g3 dd small { font-size: 11px; font-weight: 500; color: var(--mi-soft); margin-left: 2px; }
.mi-g3 dd a { color: var(--mi-bev); }
.mi-g3 dd a:hover { text-decoration: underline; }
.mi-g3 dd.mi-na { color: var(--mi-faint); font-size: 13px; font-weight: 600; }

/* Modelos: siempre una línea. El JS oculta los que no caben y el último enlace pasa a «+N más». */
.mi-mw { margin-top: 12px; }
.mi-lbl { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mi-soft); margin: 0 0 6px; }
.mi-lbl b { color: var(--mi-ink2); font-weight: 700; margin-left: 3px; }
.mi-m { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; overflow: hidden; }
.mi-m a { flex: none; font-size: 12.5px; font-weight: 500; color: var(--mi-ink); border: 1px solid var(--mi-line); border-radius: 6px; padding: 4px 8px; white-space: nowrap; }
.mi-m a:hover { border-color: var(--mi-ink); }
.mi-m a.mi-hit { border-color: var(--mi-bev); color: var(--mi-bev); font-weight: 700; }
.mi-m a.mi-mas { color: var(--mi-soft); border-style: dashed; }
.mi-m a[hidden] { display: none; }

.mi-d { margin-top: 12px; font-size: 13.5px; line-height: 1.55; color: var(--mi-ink2); }
.mi-d p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mi-d p + p { display: none; margin-top: 8px; }
.mi-open .mi-d p { display: block; -webkit-line-clamp: unset; }
.mi-det { display: none; margin-top: 12px; }
.mi-open .mi-det { display: block; }
.mi-det dl { display: grid; grid-template-columns: auto 1fr; font-size: 13px; border-top: 1px solid var(--mi-line); }
.mi-det dt, .mi-det dd { padding: 7px 0; border-bottom: 1px solid var(--mi-line2); }
.mi-det dt { color: var(--mi-soft); padding-right: 16px; }
.mi-det dd { color: var(--mi-ink); font-weight: 500; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mi-det dd a { color: var(--mi-blue); }
.mi-det dd a:hover { text-decoration: underline; }
.mi-l { margin-top: 4px; }
.mi-l a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--mi-line); font-size: 13.5px; font-weight: 600; color: var(--mi-ink); }
.mi-l a i { font-style: normal; color: var(--mi-faint); }
.mi-l a:hover span { text-decoration: underline; }
.mi-l a:hover i { color: var(--mi-ink); }
/* Botones: «Más datos» y «Ver <marca>» en una fila. Con una tarjeta de menos de 344 px no caben
   todos los nombres («Ver Mitsubishi Motors» es el más largo, medido el 11-10-2026) y van uno
   encima de otro. Todas las tarjetas de una rejilla miden lo mismo, así que la fila sigue
   alineada. Si entra una marca de nombre más largo, «Ver …» se corta con «…» (el title lo da
   entero) en vez de salirse de la tarjeta. */
.mi-bc { container-type: inline-size; }
.mi-a { margin-top: auto; padding-top: 14px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
.mi-a .mi-btn { height: 42px; font-size: 14px; justify-content: center; }
.mi-go { min-width: 0; }
.mi-go span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@container (max-width: 343px) {
    .mi-a { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
.mi-xb { color: var(--mi-ink); background: var(--mi-bg1); border: 1px solid var(--mi-line); }
.mi-xb:hover { border-color: var(--mi-ink); }
.mi-xb[aria-expanded=true] .mi-chev { transform: rotate(-135deg) translateY(2px); }
.mi-go { border: 1px solid var(--mi-ink); color: var(--mi-ink); background: var(--mi-bg); }
.mi .mi-go:hover { background: var(--mi-ink); color: #fff; }

/* ── Publicidad (solo en dev) y «Mostrar más» ─────────────────────────────────────────────── */
.mi-ad { margin: 40px 0; display: flex; flex-direction: column; align-items: center; gap: 6px; grid-column: 1 / -1; display:none }
.mi-ad-tag { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mi-faint); }
.mi-ad-box { width: 300px; height: 250px; max-width: 100%; background: var(--mi-bg1); border: 1px solid var(--mi-line); display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--mi-faint); }
@media (min-width: 1040px) { .mi-ad-box { width: 970px; } }
.mi-more { display: flex; justify-content: center; margin: 32px 0 8px; }
.mi-more .mi-btn { height: 44px; padding: 0 24px; border: 1px solid var(--mi-ink); color: var(--mi-ink); background: var(--mi-bg); }
.mi-more .mi-btn:hover { background: var(--mi-ink); color: #fff; }
.mi-more small { display: block; text-align: center; font-size: 12.5px; color: var(--mi-soft); margin-top: 8px; }

/* ── Bloques (al agrupar) ─────────────────────────────────────────────────────────────────── */
/* scroll-margin: la cabecera fija del sitio mide 80 px. */
.mi-blk { padding-top: 48px; scroll-margin-top: 96px; }
.mi-blk:first-child { padding-top: 0; }
.mi-blk-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; border-bottom: 1px solid var(--mi-ink); padding-bottom: 10px; margin-bottom: 24px; }
.mi-blk-hd .mi-eyebrow { display: block; margin-bottom: 2px; letter-spacing: .08em; }
.mi-blk-hd h2 { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.mi-blk-hd p { font-size: 13.5px; color: var(--mi-mute); font-variant-numeric: tabular-nums; }
.mi-blk-hd p b { color: var(--mi-ink); font-weight: 600; }

/* ── Vista de tabla ───────────────────────────────────────────────────────────────────────── */
.mi-tw { overflow-x: auto; }
.mi-tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.mi-tbl thead th { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mi-soft); text-align: right; padding: 0 12px 10px; border-bottom: 1px solid var(--mi-ink); white-space: nowrap; vertical-align: bottom; }
.mi-tbl thead th.mi-tl { text-align: left; }
.mi-tbl thead th button { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.mi-tbl thead th button::after { content: "↕"; font-size: 11px; color: var(--mi-line); }
.mi-tbl thead th button:hover { color: var(--mi-ink); }
.mi-tbl thead th[aria-sort] button { color: var(--mi-ink); }
.mi-tbl thead th[aria-sort=ascending] button::after { content: "↑"; color: var(--mi-ink); }
.mi-tbl thead th[aria-sort=descending] button::after { content: "↓"; color: var(--mi-ink); }
.mi-tbl td { padding: 0 12px; height: 64px; border-bottom: 1px solid var(--mi-line); text-align: right; font-size: 14px; color: var(--mi-ink2); white-space: nowrap; }
.mi-tbl td.mi-tl { text-align: left; }
.mi-tbl tbody tr:hover td { background: var(--mi-bg1); }
.mi-tbl .mi-na { color: var(--mi-faint); }
.mi-tb { display: flex; align-items: center; gap: 12px; }
.mi-lgb { width: 40px; height: 40px; border: 1px solid var(--mi-line2); border-radius: 6px; display: flex; align-items: center; justify-content: center; flex: none; background: var(--mi-bg); }
.mi-lgb svg { width: 28px; height: 28px; }
.mi-tb b { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: var(--mi-ink); }
.mi-tb b a:hover { text-decoration: underline; }
.mi-tb small { display: block; font-size: 12px; color: var(--mi-soft); }
.mi-tb small.mi-tg { color: var(--mi-bev); font-weight: 600; }
.mi-t2 b { display: block; font-size: 14px; font-weight: 600; color: var(--mi-ink); }
.mi-t2 small { display: block; font-size: 12px; color: var(--mi-soft); }
.mi-tbl td.mi-tr .mi-t2 { text-align: right; }
.mi-tbl .mi-cuo { min-width: 170px; }
.mi-cq { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.mi-cq .mi-v { text-align: right; line-height: 1.25; }
.mi-cq .mi-v b { display: block; font-size: 14.5px; font-weight: 700; color: var(--mi-ink); }
.mi-cq .mi-v small { display: block; font-size: 12px; color: var(--mi-soft); }
.mi-cq i { display: block; width: 80px; height: 6px; background: var(--mi-bg2); border-radius: 3px; overflow: hidden; flex: none; }
.mi-cq i span { display: block; height: 100%; background: var(--mi-bev); }
.mi-tbl tr.mi-gh td { height: auto; padding: 22px 12px 10px; background: var(--mi-bg); text-align: left; border-bottom: 1px solid var(--mi-line); white-space: normal; }
.mi-tbl tr.mi-gh:hover td { background: var(--mi-bg); }
.mi-tbl tr.mi-gh b { font-size: 15px; font-weight: 700; color: var(--mi-ink); }
.mi-tbl tr.mi-gh span { display: inline-block; font-size: 13px; color: var(--mi-soft); margin-left: 10px; }
.mi-xt { font: inherit; width: 32px; height: 32px; border: 1px solid var(--mi-line); border-radius: 6px; background: var(--mi-bg); color: var(--mi-ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.mi-xt[aria-expanded=true] { background: var(--mi-ink); color: #fff; }
.mi-xt[aria-expanded=true] .mi-chev { transform: rotate(-135deg) translate(-1px, -1px); }
.mi-tbl tr.mi-tro td, .mi-tbl tr.mi-xrow td { background: var(--mi-bg1); }
.mi-tbl tr.mi-xrow td { height: auto; padding: 4px 12px 20px 64px; text-align: left; white-space: normal; }
.mi-xg { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; padding-top: 12px; }
.mi-xg p { font-size: 13.5px; line-height: 1.6; color: var(--mi-ink2); }
.mi-xg p + p { margin-top: 6px; }
.mi-xg .mi-lk { display: flex; gap: 16px; margin-top: 12px; font-size: 13px; font-weight: 600; }
.mi .mi-xg .mi-lk a { color: var(--mi-blue); }
.mi-mchips { display: flex; flex-wrap: wrap; gap: 6px; }
.mi-mchips a { font-size: 13px; font-weight: 500; color: var(--mi-ink); border: 1px solid var(--mi-line); border-radius: 6px; padding: 4px 9px; background: var(--mi-bg); }
.mi-mchips a:hover { border-color: var(--mi-ink); }
.mi-mchips a.mi-hit { border-color: var(--mi-bev); color: var(--mi-bev); font-weight: 700; }

/* ── De la A a la Z, nota y sin resultados ────────────────────────────────────────────────── */
.mi-az { margin-top: 56px; border-top: 1px solid var(--mi-ink); padding-top: 16px; }
.mi-az h2 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 4px; }
.mi-az > p { font-size: 13.5px; color: var(--mi-mute); margin-bottom: 16px; }
.mi-az ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; }
.mi-az li a { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--mi-line2); font-size: 14px; font-weight: 600; color: var(--mi-ink); }
.mi-az li a small { font-weight: 400; color: var(--mi-soft); white-space: nowrap; }
.mi .mi-az li a:hover { text-decoration: underline; }
.mi-note { margin-top: 40px; font-size: 12.5px; color: var(--mi-soft); line-height: 1.6; border-top: 1px solid var(--mi-line2); padding-top: 16px; }
.mi .mi-note a { color: var(--mi-blue); }
.mi-empty { padding: 56px 0; text-align: center; color: var(--mi-mute); }
.mi-empty p + p { margin-top: 12px; }

/* ── Tablet ───────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
    .mi-gx { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mi-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mi-az ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Móvil ────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .mi-vh { padding-top: 20px; }
    .mi-vh h1 { font-size: 25px; }
    .mi-search .mi-btn-dark { display: none; }
    .mi-fgrid { grid-template-columns: 1fr; }
    .mi-rbar { flex-direction: column; align-items: stretch; }
    .mi-rb { display: grid; grid-template-columns: 1fr; gap: 8px; }
    .mi-ctl { flex-direction: column; align-items: stretch; gap: 4px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mi-ink2); }
    .mi-ctl-g { order: -1; }
    .mi-rb select { min-width: 0; width: 100%; }
    .mi-rb .mi-seg { display: none; }
    .mi-grpseg { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; }
    .mi-grpseg button { padding: 0 4px; font-size: 13px; }

    .mi-gidx { margin-left: -16px; margin-right: -16px; border-radius: 0; border-left: 0; border-right: 0; padding: 14px 16px; }
    .mi-gx { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 8px; margin-right: -16px; padding-right: 16px; }
    .mi-gx::-webkit-scrollbar { display: none; }
    .mi-gx-t { flex: 0 0 72%; scroll-snap-align: start; }

    .mi-tbl { font-size: 13px; }
    .mi-tbl .mi-hm, .mi-lgb { display: none; }
    .mi-tbl td { padding: 0 4px; height: 56px; }
    .mi-tbl thead th { padding: 0 6px 10px; white-space: normal; }
    .mi-tbl thead th.mi-cuo button { text-align: right; }
    .mi-tb b { font-size: 14px; }
    .mi-cq i { display: none; }
    .mi-tbl .mi-cuo { min-width: 0; }
    .mi-tbl td.mi-cuo, .mi-cq .mi-v small { white-space: normal; }
    .mi-tbl tr.mi-xrow td { padding: 4px 10px 16px; }
    .mi-xg { grid-template-columns: 1fr; gap: 12px; }
    .mi-xt { width: 28px; height: 28px; }
}
@media (max-width: 639px) {
    .mi-cards { grid-template-columns: 1fr; gap: 16px; }
    .mi-ph, .mi-lg { display: none; }
    .mi-b { padding: 12px 14px 14px; }
    .mi-th { display: block; position: relative; flex: none; width: 92px; height: 69px; border-radius: 6px; overflow: hidden; background: var(--mi-bg2); }
    .mi-th img { width: 100%; height: 100%; object-fit: cover; }
    .mi-th .mi-rk { font-size: 9.5px; letter-spacing: 0; padding: 2px 5px; border-bottom-right-radius: 4px; }
    .mi-t h3 { font-size: 20px; }
    .mi-tag { font-size: 14px; }
    .mi-g3 dt { letter-spacing: .02em; }
    .mi-g3 dd { font-size: 15px; }
    .mi-a .mi-btn { height: 40px; }
    .mi-az ul { grid-template-columns: 1fr; }
    .mi-az li a small { display: none; }
}