/* Colinha Digital · /aovivo/ — camada do CELULAR (< 768 px), 25/10/2026.
   Complementa o aovivo.css sem editá-lo. Toda regra vale só com:
     - @media (max-width:767px)  E
     - body.mx  (classe ligada pelo aovivo-mobile.js depois de montar tudo; sem o JS, nada aqui se aplica)
   Elementos novos (criados pelo aovivo-mobile.js): #mobPlacar (.mxp), #mobMais (.mxs), #mobMaisBtn (.mx-mais).
   Estados do body: .mx-scrp (tela Placar) · .mx-pres (tela Placar sem governador em foco: compacto fixo, desce ao rolar) · .mx-show (placar compacto visível) · .mx-lock (folha "Mais" aberta) · .mx-ovl (janela interna aberta).
   Variável --mx-top: altura da faixa amarela da simulação (0 fora dela). */

/* fora do celular os elementos novos não aparecem */
body.mx .mxp, body.mx .mxs { display: none; }

@media (max-width: 767px) {

  /* ---------- área segura do iPhone (PWA com barra translúcida) ---------- */
  body.mx::before { content: ""; position: fixed; left: 0; right: 0; top: 0; height: env(safe-area-inset-top, 0px); background: var(--bg); z-index: 100; pointer-events: none; }
  body.mx .aov > .hd { padding-top: calc(8px + env(safe-area-inset-top, 0px)); }
  html.simon body.mx .aov { padding-top: var(--mx-top, 42px); }
  html.simon body.mx .simbar { font-size: 12.5px; padding: 6px 8px; line-height: 1.25; }
  /* na simulação a faixa amarela fica por cima: janelas e folha "Mais" começam abaixo dela (o ✕ continua tocável) */
  html.simon body.mx .ovl { top: var(--mx-top, 44px); }
  html.simon body.mx .mxs:not([hidden]) { top: var(--mx-top, 44px); }

  /* ---------- cabeçalho enxuto: só marca + Aa; o resto foi para "Mais" ---------- */
  body.mx .hd { gap: 8px 10px; }
  body.mx .brand { min-width: 0; flex: 1 1 auto; min-height: 44px; }
  /* fora da tela Placar o cabeçalho fica só com a marca: o placar compacto já mostra hora e andamento */
  body.mx:not(.mx-scrp) .hd > .live, body.mx:not(.mx-scrp) .hd > .clock { display: none; }
  body.mx .brand .lg { height: 24px; }
  body.mx .brand .cd { font-size: 15px; white-space: nowrap; }
  body.mx .tools { gap: 6px; }
  body.mx .tools #btnInst, body.mx .tools #btnCine, body.mx .tools #btnCt { display: none !important; }
  html.cinema body.mx .tools #btnCine { display: inline-flex !important; align-items: center; justify-content: center; width: 48px; }
  body.mx .tools #btnBig { height: 44px; min-width: 48px; border-radius: 12px; }
  body.mx .tools #btnBig span { font-size: 19px; font-weight: 900; }
  body.mx .live { padding: 7px 14px; max-width: 100%; }
  body.mx .live b { font-size: 14px; letter-spacing: .03em; }
  body.mx .clock { margin-left: auto; }
  body.mx .clock b { font-size: 20px; }
  body.mx .clock small { font-size: 13px; }
  body.mx .seal { font-size: 14px; padding: 6px 12px; }

  /* o placar compacto substitui a faixa antiga de texto */
  body.mx .mtop { display: none !important; }

  /* ---------- PLACAR COMPACTO (fixo no topo) ---------- */
  body.mx .mxp {
    display: block; order: 1; position: sticky; top: calc(var(--mx-top, 0px) + env(safe-area-inset-top, 0px)); z-index: 32;
    margin: 6px 0 0; padding: 9px 12px 8px; cursor: pointer; -webkit-tap-highlight-color: transparent;
    background: color-mix(in srgb, #050914 93%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid var(--bd); border-bottom: 1px solid var(--bd2); box-shadow: 0 8px 22px rgba(0, 0, 0, .38);
  }
  body.mx .mxp:focus-visible { outline: 3px solid var(--acc2); outline-offset: -3px; }
  /* tela "Placar": o compacto fica guardado e desce quando o placar grande sai da tela */
  body.mx.mx-pres .mxp { position: fixed; left: 0; right: 0; margin: 0; transform: translateY(-115%); visibility: hidden; transition: transform .22s ease, visibility 0s .22s; }
  body.mx.mx-pres.mx-show .mxp { transform: none; visibility: visible; transition: transform .22s ease; }
  html.soplacar body.mx .mxp, html.cinema body.mx .mxp, body.mx.mx-ovl .mxp { visibility: hidden !important; }

  body.mx .mxp-r { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: center; }
  body.mx .mxp-c { --c: var(--neu); display: flex; align-items: center; gap: 12px; min-width: 0; }
  body.mx .mxp-c2 { justify-content: flex-end; text-align: right; }
  body.mx .mxp-f {
    flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
    background: color-mix(in srgb, var(--c) 35%, #0b1430); box-shadow: 0 0 0 2.5px var(--c); color: #fff; font: 800 15px var(--sans);
  }
  body.mx .mxp-f img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; }
  body.mx .mxp-fw { position: relative; flex: none; display: block; }
  body.mx .mxp-num { position: absolute; bottom: -5px; right: -5px; min-width: 24px; padding: 0 4px; font-size: 12.5px; line-height: 18px; border: 2px solid #050914; border-radius: 7px; }
  body.mx .mxp-c2 .mxp-num { right: auto; left: -5px; }
  body.mx .mxp.mxp-pre .mxp-u { display: none; }
  body.mx .mxp-t { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
  body.mx .mxp-c2 .mxp-t { align-items: flex-end; }
  body.mx .mxp-n { display: block; max-width: 100%; font: 700 15px/1.25 var(--sans); color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.mx .mxp-p { font: 900 clamp(24px, 7.6vw, 32px)/1.05 var(--sans); color: var(--c); font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap; }
  body.mx .mxp-c.el .mxp-f { box-shadow: 0 0 0 3px var(--c), 0 0 0 6px var(--ok); }
  body.mx .mxp-bar { position: relative; display: flex; height: 10px; margin: 8px 2px 6px; border-radius: 999px; background: var(--neu); }
  body.mx .mxp-bar i { display: block; height: 100%; transition: width .8s ease; }
  body.mx .mxp-bar i:first-child { border-radius: 999px 0 0 999px; }
  body.mx .mxp-bar i:last-of-type { border-radius: 0 999px 999px 0; }
  body.mx .mxp-half { position: absolute; left: 50%; top: -4px; bottom: -4px; width: 3px; border-radius: 2px; background: #fff; transform: translateX(-50%); box-shadow: 0 0 4px #000; }
  body.mx .mxp-s { display: flex; align-items: center; gap: 10px; font: 600 14.5px/1.3 var(--sans); color: var(--mu); }
  body.mx .mxp-a { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.mx .mxp-a b { color: var(--tx); font-weight: 800; font-variant-numeric: tabular-nums; }
  body.mx .mxp-a .mxp-ok { color: var(--ok); }
  body.mx .mxp-u { flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
  body.mx .mxp-u:empty { display: none; }
  body.mx .mxp-u.warn { color: var(--warn); font-weight: 800; }
  body.mx .mxp-go { flex: none; display: inline-flex; align-items: center; gap: 2px; color: var(--acc2); font-weight: 800; white-space: nowrap; }
  body.mx .mxp-go svg { width: 16px; height: 16px; }
  body.mx:not(.mx-pres) .mxp-go { display: none; }
  @media (max-width: 374px) {
    body.mx .mxp-go { display: none; }
    body.mx .mxp-f, html.big body.mx .mxp-f { width: 38px; height: 38px; }
    body.mx .mxp-p, html.big body.mx .mxp-p { font-size: 28px; }
  }

  /* ---------- BARRA INFERIOR estilo app ---------- */
  body.mx .bnav {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    height: calc(66px + env(safe-area-inset-bottom, 0px)); padding: 0 4px env(safe-area-inset-bottom, 0px);
    background: color-mix(in srgb, #060c1c 95%, transparent); border-top: 1px solid var(--bd2); box-shadow: 0 -8px 24px rgba(0, 0, 0, .35);
  }
  body.mx .bnav > [data-s="tv"] { display: none; }
  body.mx .bnav > button {
    min-height: 58px; padding: 6px 2px 5px; gap: 3px; background: none; color: var(--mu); border-radius: 0;
    font: 700 13px/1.1 var(--sans); -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  }
  body.mx .bnav > button .mxi { display: grid; place-items: center; width: 58px; max-width: 100%; height: 32px; border-radius: 999px; font-size: 0; transition: background .2s ease; }
  body.mx .bnav > button .mxi svg { width: 25px; height: 25px; }
  body.mx .bnav > button .mxl { font-size: 13px; white-space: nowrap; letter-spacing: 0; }
  body.mx .bnav > button.on { color: #fff; background: none; }
  body.mx .bnav > button.on .mxi { background: color-mix(in srgb, var(--acc) 78%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--acc2) 45%, transparent); }
  body.mx .bnav > button.on .mxl { font-weight: 800; }
  body.mx .bnav > button:active .mxi { background: color-mix(in srgb, var(--acc) 40%, transparent); }
  body.mx .bnav > button:focus-visible { outline: 3px solid var(--acc2); outline-offset: -3px; }
  html.big body.mx .bnav > button .mxl { font-size: 13.5px; }

  /* atalhos do desktop: no Placar somem (estão no "Mais"); no Mapa fica só a busca (como antes) */
  body.mx .aov[data-scr="pres"] > .nav { display: none; }

  /* ---------- FOLHA "MAIS" (tela cheia) ---------- */
  body.mx-lock { overflow: hidden; }
  html:has(body.mx-lock) { overflow: hidden; }
  body.mx .mxs:not([hidden]) {
    display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 96; background: var(--bg2); color: var(--tx);
    opacity: 0; transform: translateY(18px); transition: opacity .18s ease, transform .18s ease;
  }
  body.mx .mxs.in { opacity: 1; transform: none; }
  body.mx .mxs-hd {
    flex: none; display: flex; align-items: center; gap: 12px; padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px 18px;
    border-bottom: 1px solid var(--bd2); background: linear-gradient(180deg, #132048, var(--bg2));
  }
  body.mx .mxs-hd h2 { margin: 0; flex: 1; font: 900 22px/1.2 var(--sans); }
  body.mx .mxs-x { flex: none; width: 52px; height: 52px; border-radius: 14px; border: 1px solid var(--bd2); background: #1b2a55; color: #fff; display: grid; place-items: center; cursor: pointer; }
  body.mx .mxs-x svg { width: 26px; height: 26px; }
  body.mx .mxs-b { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 6px 14px calc(24px + env(safe-area-inset-bottom, 0px)); }
  body.mx .mxs-b h3 { margin: 18px 4px 10px; font: 800 15px/1.2 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--mu); }
  body.mx .mxs-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  body.mx .mxs-i {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 96px; padding: 10px 4px;
    border: 1px solid var(--bd); border-radius: 16px; background: var(--card); color: var(--tx); cursor: pointer; text-align: center;
    font: 700 clamp(14px, 3.9vw, 15.5px)/1.2 var(--sans); -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  }
  body.mx .mxs-i[hidden] { display: none; }
  body.mx .mxs-i:active { background: color-mix(in srgb, var(--acc) 30%, var(--card)); }
  body.mx .mxs-i:focus-visible { outline: 3px solid var(--acc2); outline-offset: 2px; }
  body.mx .mxs-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: color-mix(in srgb, var(--acc) 22%, transparent); color: #cfe0ff; }
  body.mx .mxs-ic svg { width: 26px; height: 26px; }
  body.mx .mxs-aa { font: 900 20px var(--sans); }
  body.mx .mxs-t { overflow-wrap: normal; word-break: normal; hyphens: manual; }
  body.mx .mxs-st { font: 700 13.5px var(--sans); color: var(--mu); }
  body.mx .mxs-i[aria-pressed="true"] { border-color: var(--acc2); background: color-mix(in srgb, var(--acc) 26%, var(--card)); }
  body.mx .mxs-i[aria-pressed="true"] .mxs-ic { background: var(--acc); color: #fff; }
  body.mx .mxs-i[aria-pressed="true"] .mxs-st { color: var(--acc2); }
  body.mx .mxs-ft { margin: 22px 4px 0; text-align: center; color: var(--mu2); font-size: 14px; }
  @media (max-width: 339px) { body.mx .mxs-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  /* ---------- PLACAR GRANDE (tela Placar) ---------- */
  body.mx .ttl, body.mx .ttl small { font-size: 15px; }
  body.mx .cand .nm { font-size: 20px; }
  body.mx .cand .pt, body.mx .cand .vt { font-size: 16px; }
  body.mx .cand .pc { font-size: clamp(30px, 9.3vw, 40px); }
  body.mx .cand.sm .pc { font-size: clamp(24px, 7.4vw, 32px); }
  body.mx .pprog { font-size: 16px; line-height: 1.4; }
  body.mx .pp-b { height: 10px; }
  body.mx #pres .bar { height: 18px; }
  body.mx #pres .kpi { padding: 10px 12px; }
  body.mx #pres .kpi small { font-size: 15px; white-space: normal; overflow: visible; }
  body.mx #pres .kpi b { font-size: clamp(19px, 5.8vw, 23px); white-space: normal; overflow-wrap: normal; }
  body.mx #pres .kpi i { font-size: 15px; white-space: normal; overflow: visible; }
  body.mx .ttl2, body.mx .ttl2 small { font-size: 16px; }
  body.mx .evo-empty { font-size: 16px; }

  /* ---------- GOVERNADORES: cards empilhados ---------- */
  body.mx .govs { gap: 12px; }
  body.mx .gv { padding: 14px 14px 12px; gap: 10px; border-radius: 16px; }
  body.mx .gv .h { align-items: center; font-size: 16px; }
  body.mx .gv .h small { font-size: 15px; font-weight: 700; padding: 4px 11px; border-radius: 999px; background: rgba(148, 163, 184, .14); color: var(--tx); }
  body.mx .gv .row { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; }
  body.mx .gv .row .ph { width: 56px; height: 56px; border-radius: 14px; box-shadow: 0 0 0 2.5px var(--c); }
  body.mx .gv .row .ph img { object-position: 50% 18%; }
  body.mx .gv .row .n { font-size: 17px; line-height: 1.2; white-space: normal; }
  body.mx .gv .row .n small { font-size: 15px; margin-top: 2px; }
  body.mx .gv .row .p { font: 900 clamp(28px, 8.6vw, 34px)/1 var(--sans); letter-spacing: -.02em; }
  body.mx .gv .bar { height: 12px; }
  body.mx .gv .m { font-size: 15px; white-space: normal; }
  body.mx .gv .dec { font-size: 13px; }
  /* letras grandes no celular: mantém as fotos e o nome completo */
  html.big body.mx .gv .row { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; }
  html.big body.mx .gv .row .ph { display: grid; width: 52px; height: 52px; }
  html.big body.mx .gv .fn { display: inline; }
  html.big body.mx .gv .sn { display: none; }
  html.big body.mx .gv .row .n { font-size: 20px; }
  html.big body.mx .gv .row .p { font-size: clamp(30px, 9.4vw, 38px); }
  html.big body.mx .gv .m { display: block; font-size: 17px; }

  /* ---------- ESTADOS ---------- */
  body.mx .mest { padding: 14px; border-radius: 16px; }
  body.mx .mest .h { font-size: 18px; }
  body.mx .mest .h small { font-size: 15px; }
  body.mx .mest .cc2 { font-size: 24px; gap: 20px; }
  body.mx .mest .m { font-size: 15px; }
  body.mx .mest-sec h3, body.mx .mnews h3 { font-size: 19px; }

  /* ---------- MAPA: cabeçalho compacto, mapa alto, controles grandes ---------- */
  body.mx .map-hd { gap: 8px; padding: 10px 10px 0; }
  body.mx .crumb { flex: 1 1 100%; font-size: 17px; }
  body.mx #btnBr { min-height: 44px; font-size: 16px; }
  body.mx #modeSeg { flex: 1 1 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  body.mx #modeSeg button { min-height: 46px; padding: 6px 4px; font-size: 16px; }
  body.mx #flt { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding: 2px 0 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  body.mx #flt::-webkit-scrollbar { display: none; }
  body.mx #flt button { flex: none; min-height: 44px; padding: 6px 14px; font-size: 15px; }
  body.mx #layerSel { flex: 1 1 100%; min-height: 46px; font-size: 16px; }
  body.mx .legend { font-size: 15px; gap: 8px 14px; }
  body.mx .stage { height: 64vh; height: max(340px, calc(100svh - 236px - env(safe-area-inset-bottom, 0px))); min-height: 340px; }
  body.mx .mtools { left: 8px; right: 8px; top: auto; bottom: 8px; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; gap: 6px; overflow-x: auto; scrollbar-width: none; touch-action: pan-x; padding: 2px; }
  body.mx .mtools::-webkit-scrollbar { display: none; }
  body.mx .mtools > button { flex: none; width: 46px; height: 46px; border-radius: 14px; font-size: 20px; background: color-mix(in srgb, #0a1226 86%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 4px 12px rgba(0, 0, 0, .4); }
  body.mx .mtools > select { flex: none; height: 46px; max-width: 130px; border-radius: 14px; font-size: 15px; padding: 0 8px; background: color-mix(in srgb, #0a1226 86%, transparent); }
  body.mx .mtools [data-t="reset"] { order: 1; } body.mx .mtools [data-t="in"] { order: 2; } body.mx .mtools [data-t="out"] { order: 3; }
  body.mx .mtools [data-t="tilt"] { order: 4; font-size: 16px; } body.mx .mtools [data-t="follow"] { order: 5; } body.mx .mtools [data-t="atr"] { order: 6; }
  body.mx .mtools #regSel { order: 7; } body.mx .mtools [data-t="foto"] { order: 8; } body.mx .mtools [data-t="leg"] { order: 9; }
  body.mx .mcard .x { width: 48px; height: 48px; }
  body.mx .map-ft { font-size: 15px; white-space: normal; }

  /* ---------- TV / corrida / últimos municípios ---------- */
  body.mx .est-hd { flex-wrap: wrap; }
  body.mx .est-hd > span { white-space: normal; overflow: visible; }
  body.mx .est-hd small { white-space: normal; }
  body.mx .tv-hd { gap: 8px; }
  body.mx .tv-hd b { font-size: 14px; order: 1; flex: 1 1 auto; }
  body.mx .tv-hd #tvSnd { order: 2; min-height: 44px; }
  body.mx .tv-hd select { order: 3; flex: 1 1 100%; min-height: 46px; font-size: 16px; }
  body.mx .tv-ft, body.mx .tv-ft button, body.mx .tv-ft a { font-size: 15px; }
  body.mx .tv-ft a, body.mx .tv-ft button { display: inline-flex; align-items: center; min-height: 44px; }

  /* ---------- JANELAS INTERNAS: tela cheia, fechar grande sempre à vista ---------- */
  body.mx .ovl .gridk .kpi { padding: 12px 12px; min-width: 0; }
  body.mx .ovl .gridk .kpi small { font-size: clamp(12.5px, 3.6vw, 15px) !important; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; letter-spacing: .01em !important; }
  body.mx .ovl .gridk .kpi b { font-size: clamp(19px, 5.7vw, 26px) !important; white-space: normal; overflow-wrap: normal; letter-spacing: -.01em; }
  body.mx .ovl-hd { padding-top: calc(12px + env(safe-area-inset-top, 0px)); padding-right: 72px; }
  body.mx .ovl-x { width: 52px; height: 52px; top: calc(8px + env(safe-area-inset-top, 0px)); right: 10px; border-radius: 14px; font-size: 24px; }
  body.mx #ovlBody { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }

  /* aviso de eleitos (Parabéns…): fechar grande, sem cobrir a etiqueta da simulação */
  body.mx .parab { padding-top: 58px; }
  body.mx .parab .px { width: 48px; height: 48px; top: 6px; right: 6px; font-size: 26px; border-radius: 12px; background: rgba(255, 255, 255, .08); }

  /* ---------- LETRAS GRANDES (Aa) no celular ---------- */
  html.big body.mx .mxp-f { width: 40px; height: 40px; }
  html.big body.mx .mxp-n { font-size: 16px; }
  html.big body.mx .mxp-p { font-size: clamp(25px, 7.9vw, 33px); }
  html.big body.mx .mxp-s { font-size: 16px; }
  html.big body.mx .mxs-g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.big body.mx .mxs-i { font-size: 18px; min-height: 104px; }
  html.big body.mx .mest .cc2 { font-size: 26px; }
  /* placar grande em letras grandes: um candidato por linha, % bem maior */
  html.big:not(.soplacar) body.mx #presCands { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  html.big:not(.soplacar) body.mx #presCands .cand {
    display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "ph nm" "ph pt" "ph pc" "ph vt" "ph el";
    column-gap: 14px; row-gap: 2px; align-items: center; justify-items: start; text-align: left; padding: 12px 14px; border-top-width: 1px; border-left: 6px solid var(--c);
  }
  html.big:not(.soplacar) body.mx #presCands .cand .ph { grid-area: ph; width: 64px; margin: 0; align-self: center; }
  html.big:not(.soplacar) body.mx #presCands .cand .nm { grid-area: nm; font-size: 23px; }
  html.big:not(.soplacar) body.mx #presCands .cand .pt { grid-area: pt; font-size: 17px; margin: 0; }
  html.big:not(.soplacar) body.mx #presCands .cand .pc { grid-area: pc; font-size: clamp(40px, 13vw, 54px); margin: 2px 0; }
  html.big:not(.soplacar) body.mx #presCands .cand .vt { grid-area: vt; font-size: 17px; }
  html.big:not(.soplacar) body.mx #presCands .cand .el { grid-area: el; }
}

/* ---------- menos movimento ---------- */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  body.mx .mxp, body.mx.mx-pres .mxp, body.mx.mx-pres.mx-show .mxp, body.mx .mxs:not([hidden]), body.mx .mxs.in,
  body.mx .mxp-bar i, body.mx .bnav > button .mxi { transition: none !important; }
  body.mx .mxs:not([hidden]) { transform: none; opacity: 1; }
}