/* Colpesados — megamenú «Equipos» y cajón del celular (14-oct-2026, tablero de 3 variantes).
   Contenido: documento de investigación §08 (tres verticales con sus categorías + accesos a venta y arriendo).
   Variantes: .mm--a «Tres columnas» · .mm--b «Riel + vista previa» · .mm--c «Pictogramas».
   Bricks: nav-nested + dropdown (megaMenu: true, contenido anidado) para el panel; offcanvas para el cajón
   (A: accordion-nested · B: dropdown multiLevel con «Volver» · C: bloques anidados). Mismo sistema que base.css:
   Inter, paleta por roles, amarillo solo en el CTA, íconos #012884, radios 8/12, una sombra. */

/* ---------- Disparador (calca el patrón de Bricks: enlace al listado + botón de despliegue) ---------- */
.hdr__bar { position: relative; }
.mm-toggle { display: inline-flex; align-items: center; gap: 2px; }
.mm-toggle > a { gap: 0; }
.mm-caret { display: grid; place-items: center; width: 26px; height: 26px; margin-right: -6px; padding: 0; border: 0; border-radius: var(--r-btn); background: none; color: var(--c-azul); cursor: pointer; }
.mm-caret:hover { background: var(--c-azul-10); }
.mm-caret .i { transition: transform 200ms var(--ease); }
.mm-caret[aria-expanded="true"] .i { transform: rotate(180deg); }
.mm-toggle.is-abierto > a { color: var(--c-azul); }

/* ---------- Panel (escritorio) ---------- */
.mm { display: none; }
.mm-listo .mm { display: block; position: absolute; left: 0; right: 0; top: 100%; z-index: 2; background: var(--c-blanco); border-top: 1px solid var(--c-linea); box-shadow: var(--shadow-card); max-height: calc(100vh - 92px); max-height: calc(100dvh - 92px); overflow-y: auto; overscroll-behavior: contain; visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity 220ms var(--ease), transform 220ms var(--ease), visibility 0s linear 220ms; }
.mm-listo .mm.is-abierto { visibility: visible; opacity: 1; transform: none; transition: opacity 220ms var(--ease), transform 220ms var(--ease), visibility 0s; }
.hdr.is-suelto .mm { max-height: calc(100dvh - 76px); }
.mm__in { padding-top: 28px; padding-bottom: 28px; }
.mm-velo { position: fixed; inset: 0; z-index: 49; background: rgba(0, 22, 63, .32); opacity: 0; visibility: hidden; transition: opacity 220ms var(--ease), visibility 0s linear 220ms; }
.mm-velo.is-abierto { opacity: 1; visibility: visible; transition: opacity 220ms var(--ease), visibility 0s; }

/* Piezas comunes */
.mm-eti { margin: 0 0 10px; font-size: 13.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-texto-2); }
.pg--sm { width: 30px; height: 30px; }
.pg--md { width: 40px; height: 40px; }
.mm .pg, .mm-cajon .pg { color: var(--c-azul); }
.mm-n { margin-left: auto; color: var(--c-texto-2); font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.mm-lista { display: grid; gap: 2px; }
.mm-lista a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 10px; margin: 0 -10px; border-radius: var(--r-btn); color: var(--c-texto); text-decoration: none; font-size: 15.5px; font-weight: 600; transition: background var(--t-hover), color var(--t-hover); }
.mm-lista a:hover, .mm-lista a:focus-visible { background: var(--c-superficie); color: var(--c-azul); }
.mm-mas { display: inline-flex; align-items: center; gap: 6px; color: var(--c-azul); font-size: 15px; font-weight: 700; text-decoration: none; }
.mm-mas .i { transition: transform var(--t-hover) var(--ease); }
.mm-mas:hover .i { transform: translateX(3px); }
.mm-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; border: 1px solid var(--c-linea); border-radius: var(--r-btn); background: var(--c-blanco); color: var(--c-texto); text-decoration: none; font-size: 15px; font-weight: 600; transition: border-color var(--t-hover), color var(--t-hover); }
.mm-chip .i { color: var(--c-azul); }
.mm-chip:hover { border-color: var(--c-azul); color: var(--c-azul); }

/* ---------- A · Tres columnas ---------- */
.mm-a__cols { display: grid; grid-template-columns: repeat(3, 1fr); }
.mm-a__col { display: flex; flex-direction: column; padding: 0 32px; border-left: 1px solid var(--c-linea); }
.mm-a__col:first-child { padding-left: 0; border-left: 0; }
.mm-a__col:last-child { padding-right: 0; }
.mm-a__head { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; margin-bottom: 10px; border-bottom: 1px solid var(--c-linea); color: var(--c-texto); text-decoration: none; }
.mm-a__head .pg { width: 52px; height: 52px; }
.mm-a__head b { display: block; font-size: 18px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.mm-a__head:hover b { color: var(--c-azul); }
.mm-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0 6px; margin-top: 3px; color: var(--c-texto-2); font-size: 15px; font-weight: 500; }
.mm-meta__u { display: inline-flex; align-items: center; gap: 6px; }
.mm-meta__u::before { content: "·"; margin-right: 0; }
.mm-cajon .mm-meta__u { display: none; }
.mm-meta .i { color: var(--c-azul); }
.mm-a__col .mm-lista { flex: 1 1 auto; align-content: start; }
.mm-a__col .mm-mas { margin-top: 12px; }
.mm-a__pie { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 24px; padding: 14px 18px; border-radius: var(--r-card); background: var(--c-superficie); }
.mm-a__pie .mm-eti { margin: 0 4px 0 0; }
.mm-a__pie .mm-mas { margin-left: auto; }
.mm-a__pie .btn { margin-left: auto; }

/* ---------- B · Riel + vista previa ---------- */
.mm-b { display: grid; grid-template-columns: 280px 1fr; gap: 32px; align-items: stretch; }
.mm-b__riel { display: grid; gap: 22px; }
.mm-b__tabs { display: grid; gap: 4px; }
.mm-b__tab { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 8px 12px; border: 0; border-radius: var(--r-btn); background: none; color: var(--c-texto); text-align: left; font: inherit; cursor: pointer; transition: background var(--t-hover); }
.mm-b__tab b { display: block; font-size: 16px; font-weight: 700; line-height: 1.25; }
.mm-b__tab .num { display: block; font-size: 15px; font-weight: 500; color: var(--c-texto-2); }
.mm-b__tab > .i { margin-left: auto; color: var(--c-texto-2); }
.mm-b__tab:hover { background: var(--c-superficie); }
.mm-b__tab[aria-selected="true"] { background: var(--c-superficie); box-shadow: inset 3px 0 0 var(--c-azul); }
.mm-b__tab[aria-selected="true"] b, .mm-b__tab[aria-selected="true"] > .i { color: var(--c-azul); }
.mm-b__tipo { display: flex; flex-wrap: wrap; gap: 8px; }
.mm-b__tipo .mm-eti { flex: 0 0 100%; margin-bottom: 2px; }
.mm-b__p { display: grid; grid-template-columns: 1fr 300px; gap: 32px; align-items: start; padding-left: 32px; border-left: 1px solid var(--c-linea); }
.mm-b__p[hidden] { display: none; }
.mm-b__cen { min-width: 0; }
.mm-b__h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 16px; }
.mm-b__h b { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.mm-b__g { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 10px; }
.mm-b__g a { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; height: 100%; padding: 14px 14px 12px; border: 1px solid var(--c-linea); border-radius: var(--r-card); color: var(--c-texto); text-decoration: none; transition: border-color var(--t-hover), background var(--t-hover); }
.mm-b__g a .pg { width: 48px; height: 48px; margin-bottom: 4px; transition: transform var(--t-hover) var(--ease); }
.mm-b__g a b { font-size: 15.5px; font-weight: 700; line-height: 1.25; }
.mm-b__g a .num { font-size: 15px; color: var(--c-texto-2); }
.mm-b__g a:hover { border-color: var(--c-azul); background: var(--c-superficie); }
.mm-b__g a:hover .pg { transform: translateX(3px); }
.mm-b__ver { display: grid; gap: 12px; }
.mm-b__foto { display: block; aspect-ratio: 16/10; border-radius: var(--r-card); overflow: hidden; background: var(--c-azul-corp); }
.mm-b__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease); }
.mm-b__foto:hover img { transform: scale(1.04); }
.mm-b__ver .mm-eti { margin: 6px 0 0; }
.mm-b__marcas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mm-b__marcas a { display: grid; place-items: center; height: 48px; padding: 8px 10px; border: 1px solid var(--c-linea); border-radius: var(--r-btn); background: var(--c-blanco); transition: border-color var(--t-hover); }
.mm-b__marcas a:hover { border-color: var(--c-azul); }
.mm-b__marcas img { max-width: 100%; max-height: 26px; width: auto; height: auto; object-fit: contain; }

/* ---------- C · Pictogramas ---------- */
.mm-c { display: grid; grid-template-columns: 1fr 280px; gap: 32px; align-items: start; }
.mm-c__filas { display: grid; }
.mm-c__fila { display: grid; gap: 6px; padding: 14px 0 10px; border-top: 1px solid var(--c-linea); }
.mm-c__fila:first-child { padding-top: 0; border-top: 0; }
.mm-c__lab { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 14px; justify-self: start; color: var(--c-texto); text-decoration: none; }
.mm-c__lab b { font-size: 17px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }
.mm-c__lab:hover b { color: var(--c-azul); }
.mm-c__lab .mm-meta { margin-top: 0; }
.mm-c__pgs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.mm-c__pgs a { display: flex; flex-direction: column; align-items: center; gap: 2px; height: 100%; padding: 10px 6px 8px; border-radius: var(--r-card); color: var(--c-texto); text-align: center; text-decoration: none; transition: background var(--t-hover); }
.mm-c__pgs a .pg { width: 56px; height: 56px; transition: transform var(--t-hover) var(--ease); }
.mm-c__pgs a b { display: flex; align-items: flex-start; justify-content: center; min-height: 2.4em; font-size: 15px; font-weight: 700; line-height: 1.2; }
.mm-c__pgs a .num { font-size: 15px; color: var(--c-texto-2); }
.mm-c__pgs a:hover { background: var(--c-superficie); }
.mm-c__pgs a:hover b { color: var(--c-azul); }
.mm-c__pgs a:hover .pg { transform: translateX(3px); }
.mm-c__lado { display: grid; gap: 18px; padding: 20px; border-radius: var(--r-card); background: var(--c-superficie); }
.mm-c__lado .mm-eti { margin-bottom: 8px; }
.mm-c__tipo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mm-c__tipo .mm-chip { justify-content: center; }
.mm-c__campo { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 12px; border: 1px solid var(--c-linea); border-radius: var(--r-field); background: var(--c-blanco); }
.mm-c__campo:focus-within { border-color: var(--c-azul); }
.mm-c__campo .i { color: var(--c-azul); }
.mm-c__campo input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 15.5px; color: var(--c-texto); }
.mm-c__campo input::placeholder { color: var(--c-texto-2); }
.mm-c__marca label { display: block; }

/* ---------- Cajón (celular y tableta) ---------- */
.mm-cajon { position: fixed; inset: 0; z-index: 80; }
.mm-cajon[hidden] { display: none; }
.mm-cajon__velo { position: absolute; inset: 0; background: rgba(0, 22, 63, .45); opacity: 0; transition: opacity 240ms var(--ease); }
.mm-cajon__in { position: absolute; top: 0; right: 0; bottom: 0; width: min(100%, 420px); display: flex; flex-direction: column; background: var(--c-blanco); box-shadow: var(--shadow-card); transform: translateX(100%); transition: transform 280ms var(--ease); }
.mm-cajon.is-abierto .mm-cajon__velo { opacity: 1; }
.mm-cajon.is-abierto .mm-cajon__in { transform: none; }
.mm-cajon__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 0 16px 0 20px; border-bottom: 1px solid var(--c-linea); }
.mm-cajon__top img { height: 28px; width: auto; }
.mm-cajon__cuerpo { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 20px; }
.mm-cajon__pie { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--c-linea); }
.mm-cajon .mm-lista a, .mm-cajon .mm-chip, .mm-cajon .mm-mas { font-size: 16px; }
.mm-cajon .mm-n { font-size: 16px; }
.mm-cajon .mm-meta { font-size: 15px; }
.mm-cajon .mm-eti { font-size: 13.5px; }
.mm-cajon__nav { display: grid; margin-top: 18px; border-top: 1px solid var(--c-linea); }
.mm-cajon__nav a { display: flex; align-items: center; justify-content: space-between; min-height: 52px; border-bottom: 1px solid var(--c-linea); color: var(--c-texto); text-decoration: none; font-size: 17px; font-weight: 600; }
.mm-cajon__nav a .i { color: var(--c-texto-2); }
.mm-cajon__tipo { display: flex; gap: 8px; margin-top: 16px; }
.mm-cajon__tipo .mm-chip { flex: 1 1 0; justify-content: center; }

/* A en el cajón: acordeón por vertical */
.mm-acc { display: grid; gap: 8px; }
.mm-acc__it { border: 1px solid var(--c-linea); border-radius: var(--r-card); }
.mm-acc__b { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 8px 14px; border: 0; background: none; color: var(--c-texto); text-align: left; font: inherit; cursor: pointer; }
.mm-acc__b b { display: block; font-size: 17px; font-weight: 800; line-height: 1.25; }
.mm-acc__b > .i { margin-left: auto; color: var(--c-azul); transition: transform 200ms var(--ease); }
.mm-acc__b[aria-expanded="true"] > .i { transform: rotate(180deg); }
.mm-acc__p { padding: 0 14px 14px; }
.mm-acc__p[hidden] { display: none; }
.mm-acc__p .mm-lista a { margin: 0 -4px; padding: 6px 4px; }
.mm-acc__p .mm-mas { margin-top: 8px; }

/* B en el cajón: niveles con «Volver» */
.mm-niveles { position: relative; overflow: hidden; margin: -20px; min-height: calc(100% + 40px); }
.mm-niv { padding: 20px; }
.mm-niv[hidden] { display: none; }
.mm-niv.is-entra { animation: mm-niv-entra 260ms var(--ease); }
.mm-niv.is-vuelve { animation: mm-niv-vuelve 260ms var(--ease); }
@keyframes mm-niv-entra { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mm-niv-vuelve { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
.mm-niv__volver { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: -6px 0 6px -8px; padding: 0 8px; border: 0; border-radius: var(--r-btn); background: none; color: var(--c-azul); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.mm-niv__t { margin: 0 0 14px; font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.mm-niv__ir { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--c-linea); background: none; color: var(--c-texto); text-align: left; font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; }
.mm-niv__ir b { display: block; font-size: 17px; font-weight: 700; }
.mm-niv__ir > .i { margin-left: auto; color: var(--c-texto-2); }
.mm-niv__ir--raiz { min-height: 52px; }
.mm-niv .mm-cajon__nav { margin-top: 0; border-top: 0; }
.mm-niv .btn--block { margin-top: 16px; }

/* C en el cajón: pictogramas por vertical */
.mm-cpg { display: grid; gap: 18px; }
.mm-cpg__lab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; color: var(--c-texto); text-decoration: none; }
.mm-cpg__lab b { font-size: 17px; font-weight: 800; }
.mm-cpg__g { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: 8px; }
.mm-cpg__g a { display: flex; flex-direction: column; align-items: center; gap: 2px; height: 100%; padding: 10px 4px 8px; border: 1px solid var(--c-linea); border-radius: var(--r-card); color: var(--c-texto); text-align: center; text-decoration: none; }
.mm-cpg__g a .pg { width: 48px; height: 48px; }
.mm-cpg__g a b { display: flex; align-items: flex-start; justify-content: center; min-height: 2.4em; font-size: 16px; font-weight: 700; line-height: 1.2; }
.mm-cpg__g a .num { font-size: 16px; color: var(--c-texto-2); }

/* ---------- Responsive ---------- */
@media (max-width: 1240px) {
  .mm-b { grid-template-columns: 250px 1fr; gap: 24px; }
  .mm-b__p { grid-template-columns: 1fr 250px; gap: 24px; padding-left: 24px; }
  .mm-c { grid-template-columns: 1fr; }
  .mm-c__lado { grid-template-columns: 1fr 1.4fr auto; align-items: end; }
  .mm-c__lado .btn { white-space: nowrap; }
}
@media (max-width: 1080px) {
  .mm-a__col { padding: 0 20px; }
  .mm-a__head .mm-meta__u { display: none; }
  .mm-b { grid-template-columns: 230px 1fr; }
  .mm-b__p { grid-template-columns: 1fr; }
  .mm-b__ver { display: none; }
  .mm-c__pgs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mm-c__pgs a { flex-direction: row; gap: 10px; text-align: left; align-items: center; }
  .mm-c__pgs a .pg { width: 40px; height: 40px; flex: 0 0 auto; }
  .mm-c__pgs a b { display: block; min-height: 0; }
}
@media (max-width: 900px) { .mm-listo .mm, .mm-velo { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .mm-listo .mm, .mm-cajon__in, .mm-cajon__velo, .mm-velo { transform: none !important; transition: none !important; }
  .mm-niv.is-entra, .mm-niv.is-vuelve { animation: none; }
}