/* =====================================================================
   MEGA MENU COM IMAGEM — portado do estudo aprovado (mockup/estudos/mega-menu.html,
   mockup/assets/css/mega-menu.css). Markup gerado por inc/mega.php; JS em assets/js/mega-menu.js.
   Só age no header em ILHA (.cabecalho--ilha). Histórico e rejeitados: docs/LOJA-FRONT.md.
   ===================================================================== */
:root { --ft-vermelho: #C9161D; }

@media (min-width: 992px) {
  /* --- âncora: o painel desce da ILHA (o __inner), não do <li> --- */
  .cabecalho--ilha .cabecalho__inner { position: relative; }
  .cabecalho--ilha .cabecalho__nav li.tem-mega--largo { position: static; }

  /* ---------- ABRIR / FECHAR ----------
     Quem abre é o JS (classe .is-aberto, com intenção de hover: abre em 80ms, troca em 90ms,
     fecha em 160ms) — o :hover puro do style.css abria/fechava a cada pixel e cortava a
     coreografia. O painel DESENROLA de cima p/ baixo (clip-path) enquanto desce 8px; o
     clip aberto tem margem negativa p/ não cortar a sombra. Fechar é mais rápido que abrir. */
  .cabecalho--ilha .mega.mx {
    left: 0; right: 0;
    width: auto; max-width: none;
    padding: 22px;
    border-top: 0;
    border-radius: 22px;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-8px);
    clip-path: inset(0 0 100% 0);
    transition:
      opacity .18s ease,
      transform .3s cubic-bezier(.4, 0, .2, 1),
      clip-path .3s cubic-bezier(.4, 0, .2, 1),
      visibility 0s linear .3s,
      top var(--t), border-radius var(--t);
  }
  .cabecalho--ilha .tem-mega--largo.is-aberto > .mega.mx {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: none;
    clip-path: inset(-40px -80px -100px -80px);
    transition:
      opacity .22s ease,
      transform .55s cubic-bezier(.16, 1, .3, 1),
      clip-path .55s cubic-bezier(.16, 1, .3, 1),
      visibility 0s,
      top var(--t), border-radius var(--t);
  }
  /* TROCA entre painéis com um já aberto (ref. Pro Hunters): a "troca seca" (transition:none) mudava
     o conteúdo de uma vez e, com alturas diferentes, a caixa saltava. Agora:
     · o painel que SAI fica opaco por baixo, parado (.is-saindo, z 6), até o novo cobrir;
     · o que ENTRA (z 7) não desenrola a cortina de novo: clip e posição já abertos, só opacidade (.14s),
       e cobre o antigo com o PRÓPRIO conteúdo ainda invisível; o conteúdo entra depois, em cascata.
       (Cruzar os dois conteúdos no mesmo fade embaralhava os textos dos dois painéis.)
     Fade nos dois ao mesmo tempo deixaria ver a página atrás (flicker); por isso o de baixo não esmaece. */
  .cabecalho--ilha .tem-mega--largo.is-aberto > .mega.mx { z-index: 7; }   /* ⚠️ acima do z 5 do .mega (style.css): com 3, o painel que FECHAVA voltava ao 5 e reaparecia por cima do novo enquanto esmaecia */
  .cabecalho--ilha .tem-mega--largo.is-saindo > .mega.mx {
    z-index: 6;
    opacity: 1; visibility: visible; pointer-events: none;
    transform: none;
    clip-path: inset(-40px -80px -100px -80px);
    transition: none;
  }
  .cabecalho--ilha .tem-mega--largo.is-aberto.is-troca > .mega.mx {
    transition: opacity .14s ease, visibility 0s, top var(--t), border-radius var(--t);
  }
  /* altura única (medida pelo JS): a linha do grid estica e os cards acompanham */
  .cabecalho--ilha .mega.mx .mx__grade { min-height: var(--mx-alto, 0px); }
  .cabecalho--ilha .tem-mega--largo.is-aberto > a { background: rgba(0, 0, 0, .07); }
  /* virou barra: encaixa rente à base, na largura do conteúdo (não 100vw) */
  .cabecalho--ilha.is-stuck .mega.mx { top: 100%; border-radius: 0 0 22px 22px; }
  /* barra + painel aberto = UMA superfície: a barra de vidro (.92 + saturate) tingia de azul/vermelho
     conforme o banner por trás e ficava de outra cor que o painel branco encostado nela → enquanto
     um painel está aberto a barra fica BRANCA sólida (volta ao vidro ao fechar) */
  .cabecalho--ilha.is-stuck.mx-aberto:not(.cabecalho--barra-amarela) .ilha { background: var(--baly-branco); box-shadow: 0 8px 24px rgba(0, 0, 0, .06); }   /* sem o filete de 1px: ele marcava a "costura" barra/painel */

  /* MESMA CAMADA (barra): o painel não "cai" da barra, ele BROTA dela.
     · sombra só PARA BAIXO (spread negativo): a sombra em volta acendia as laterais logo abaixo
       da barra e fazia o painel parecer uma folha por cima dela;
     · topo RETO (raio 0 só embaixo): encosta na barra como continuação dela (cantos côncavos
       foram testados e trocados por esta solução, mais simples, a pedido);
     · sem o translateY: na barra o painel só desenrola, sem descer de cima dela. */
  .cabecalho--ilha.is-stuck .mega.mx {
    transform: none;
    box-shadow: 0 30px 44px -26px rgba(0, 0, 0, .28), 0 70px 90px -60px rgba(0, 0, 0, .20);
  }
  /* BARRA AMARELA (Home e internas, 07/10/2026): a barra NÃO fica branca com o painel aberto (era o
     pedido: "no hover a header fica branca") → o painel fica SOLTO abaixo dela, com respiro, raio inteiro
     e sombra em volta (branco colado no amarelo parecia outra camada). ⚠️ precisa estar AQUI: a regra
     equivalente no style.css perdia para as de cima (mesma especificidade, este arquivo carrega depois). */
  .cabecalho--ilha.cabecalho--barra-amarela.is-stuck .mega.mx {
    top: calc(100% + 10px);
    border-radius: 16px;
    box-shadow: 0 18px 48px -12px rgba(0, 0, 0, .30), 0 2px 8px rgba(0, 0, 0, .08);
  }

  /* ---------- CASCATA DOS ITENS ----------
     Cada peça tem --i (ordem no painel, posto pelo JS). Lista: sobe 10px e aparece, 26ms
     entre linhas. Cards: sobem 18px com leve escala e a arte "assenta" (zoom 1.12→1);
     a etiqueta branca chega por último. `backwards` (não `both`): terminada a entrada,
     o hover volta a mandar no transform (zoom da arte, seta). */
  .is-aberto > .mx .mx-anim {
    animation: mxItem .5s cubic-bezier(.16, 1, .3, 1) backwards;
    animation-delay: calc(70ms + var(--i, 0) * 26ms);
  }
  .is-aberto > .mx .mx-midia {
    animation: mxCard .7s cubic-bezier(.16, 1, .3, 1) backwards;
    animation-delay: calc(110ms + var(--c, 0) * 70ms);
  }
  /* (a arte do PALCO fica de fora: a subida dela ao trocar de linha é do JS) */
  .is-aberto > .mx .mx-midia > img:not(.mx-palco__arte) {
    animation: mxArte 1.1s cubic-bezier(.16, 1, .3, 1) backwards;
    animation-delay: calc(110ms + var(--c, 0) * 70ms);
  }
  .is-aberto > .mx .mx-rotulo,
  .is-aberto > .mx .mx-ft__txt,
  .is-aberto > .mx .mx-ft__selo {
    animation: mxItem .5s cubic-bezier(.16, 1, .3, 1) backwards;
    animation-delay: calc(300ms + var(--c, 0) * 70ms);
  }
  .is-aberto > .mx .mx-lista__marca { animation: mxFade .4s ease .25s backwards; }
  /* TROCA entre painéis (li.is-troca, até fechar): a caixa nova cobre o antigo em .14s e só ENTÃO o
     conteúdo entra, do lado de onde o mouse veio (texto a 100ms, cards a 120ms). ⚠️ O "lavado" de
     antes (06/10) era o conteúdo novo aparecendo pálido no lugar do antigo que sumia seco; aqui ele
     nasce sobre a caixa branca já assentada, então lê como entrada, não como piscada. */
  .is-aberto.is-troca > .mx .mx-midia {
    animation: mxTrocaCard .55s cubic-bezier(.16, 1, .3, 1) backwards;
    animation-delay: calc(120ms + var(--c, 0) * 50ms);
  }
  .is-aberto.is-troca > .mx .mx-midia > img:not(.mx-palco__arte),
  .is-aberto.is-troca > .mx .mx-midia > .mx-ph,
  .is-aberto.is-troca > .mx .mx-rotulo,
  .is-aberto.is-troca > .mx .mx-ft__txt,
  .is-aberto.is-troca > .mx .mx-ft__selo { animation: none; }
  .is-aberto.is-troca > .mx .mx-anim { animation: mxTrocaItem .45s cubic-bezier(.16, 1, .3, 1) backwards; animation-delay: calc(100ms + var(--i, 0) * 16ms); }
  .is-aberto.is-troca > .mx .mx-lista__marca { animation: none; }
}
@keyframes mxItem { from { opacity: 0; transform: translateY(10px); } }
@keyframes mxCard { from { opacity: 0; transform: translateY(18px) scale(.97); } }
@keyframes mxArte { from { transform: scale(1.12); } }
@keyframes mxFade { from { opacity: 0; } }
/* troca: o conteúdo novo entra do lado de onde o mouse veio (--mx-dir ±1), depois de a caixa cobrir o antigo */
@keyframes mxTrocaItem { from { opacity: 0; transform: translateX(calc(var(--mx-dir, 1) * 14px)); } }
@keyframes mxTrocaCard { from { opacity: 0; transform: translateX(calc(var(--mx-dir, 1) * 20px)); } }
@media (min-width: 992px) {

  /* tudo que é <a> dentro do painel herdaria o estilo dos itens do TOPO (caixa-alta, borda) */
  .cabecalho__nav .mx a { font-size: inherit; text-transform: none; letter-spacing: normal; padding-block: 0; border-bottom: 0; }
  /* ⚠️ `.cabecalho__nav a` (0,1,1) vence classes simples no padding → os paddings do painel vão com o mesmo prefixo */
  .cabecalho__nav .mx .mx-linha { padding: 8px 12px; }
  .cabecalho__nav .mx .mx-todos { padding: 14px 12px 2px; font-size: 12px; }
  .cabecalho__nav .mx .mx-ft__cta { font-size: 12px; }   /* ⚠️ o `font-size: inherit` acima (0,2,1) engolia os 12px → "Todos os energéticos" saía maior que as linhas */
  .cabecalho__nav .mx .mx-simples .mega__link { padding: 8px 12px; }   /* mesmo respiro das linhas de Energéticos (o fundo cinza do hover precisa dele) */
}

/* ---------- GRADE ---------- */
.mx__grade {
  --mx-alt: 372px;                                  /* altura das imagens */
  display: grid;
  grid-template-columns: 300px repeat(var(--mx-n, 3), minmax(0, 1fr));
  gap: 16px;
}
.mx__grade--fotos { grid-template-columns: repeat(5, minmax(0, 1fr)); --mx-alt: 340px; }
.mx__col { min-width: 0; }

/* ---------- LISTA DAS LINHAS (Energéticos) ---------- */
.mx-lista { position: relative; display: flex; flex-direction: column; height: 100%; padding-left: 12px; }
/* o marcador amarelo DESLIZA até a linha sob o cursor — liga a lista ao palco */
.mx-lista__marca {
  position: absolute; left: 0; top: 0;
  width: 4px; height: 40px; border-radius: 4px;
  background: var(--baly-amarelo);
  transform: translateY(var(--mx-y, 0)); height: var(--mx-h, 40px);
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), height .3s cubic-bezier(.2, .7, .2, 1);
}
.mx-linha {
  display: block;
  padding: 8px 12px;
  border-radius: 10px;
  white-space: nowrap;
  transition: background var(--t-rapida);
}
.mx-linha strong {
  display: block;
  font-size: 13.5px; font-weight: var(--peso-heavy);
  text-transform: uppercase; letter-spacing: .03em;
  color: var(--baly-preto);
  line-height: 1.3;
}
.mx-linha span { display: block; font-size: 12.5px; color: var(--cinza-500); line-height: 1.35; margin-top: 1px; }
.mx-linha.is-on { background: var(--cinza-100); }

/* "ver tudo" no pé de cada lista */
.mx-todos {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 12px 2px;
  border-top: 1px solid var(--cor-borda);
  font-size: 12px; font-weight: var(--peso-heavy); color: var(--baly-preto);
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
.cabecalho__nav .mx .mx-todos { text-transform: uppercase; letter-spacing: .04em; }
.mx-todos svg { flex: none; width: 18px; height: 18px; transition: transform var(--t); }
.mx-todos:hover svg { transform: translateX(4px); }
.mx-lista .mx-todos { margin-top: auto; }

/* Hidratação / Infantil: título com traço + o MESMO hover da lista de Energéticos (fundo cinza + marcador
   amarelo que desliza). O sublinhado amarelo de antes foi reprovado (15/10/2026). Sem palco ao lado, a lista
   é SOLTA: nada fica marcado em repouso; o marcador aparece no 1º item que o mouse tocar e some ao sair. */
.mx-simples { display: flex; flex-direction: column; height: 100%; padding-top: 6px; }
.mx-lista--solta .mega__titulo { padding-left: 12px; }
.mx-lista--solta .mega__titulo::after { left: 12px; }
.mx-lista--solta .mega__link {
  border-radius: 10px;
  text-decoration: none;
  transition: background var(--t-rapida), color var(--t-rapida);
}
.mx-lista--solta .mega__link:hover,
.mx-lista--solta .mega__link:focus-visible { background: var(--cinza-100); color: var(--baly-preto); }
.mx-lista--solta .mx-lista__marca { opacity: 0; transition: transform .3s cubic-bezier(.2, .7, .2, 1), height .3s cubic-bezier(.2, .7, .2, 1), opacity .2s ease; }
.mx-lista--solta.is-viva .mx-lista__marca { opacity: 1; }
.mx-lista--solta .mx-lista__marca.is-salto { transition: opacity .2s ease; }   /* 1ª aparição: nasce no item, não desliza do topo */

/* ---------- MÍDIA (palco, cards e fotos) ---------- */
.mx-midia {
  position: relative; display: block;
  height: 100%; min-height: var(--mx-alt);     /* acompanha a altura da lista (a linha do grid estica) */
  border-radius: 16px; overflow: hidden;
  background: var(--cinza-100);
  isolation: isolate;
}
.mx-midia img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
a.mx-midia:hover img, .mx-palco:hover .mx-palco__arte.is-on { transform: scale(1.035); }

/* PLACEHOLDER (06/10/2026, a pedido: "remover as imagens, deixar só placeholders"): faixa listrada
   no lugar da arte, com O QUE vai ali e o TAMANHO a produzir (serve de briefing p/ a arte da Baly).
   As imagens de antes seguem em assets/img/menu/ (en-*, ft-*, hid-*, kids-*, mo-*). */
.mx-ph {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: repeating-linear-gradient(135deg, var(--cinza-100) 0 14px, var(--cinza-50) 14px 28px);
  color: var(--cinza-500);
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.mx-ph__txt {
  padding: 0 16px 64px;                     /* sobe o texto: a etiqueta branca ocupa a base do card */
  text-align: center;
  font-size: 12px; font-weight: var(--peso-semibold); line-height: 1.5;
}
.mx-ph__txt b { display: block; font-size: 12px; font-weight: var(--peso-heavy); letter-spacing: .08em; text-transform: uppercase; color: var(--cinza-700); }
a.mx-midia:hover > .mx-ph { transform: scale(1.035); }
/* FuelTech: placeholder ESCURO (o card tem véu escuro e texto branco por cima); texto no alto */
.mx-ft .mx-ph { background: repeating-linear-gradient(135deg, #2a2a2a 0 14px, #222 14px 28px); color: rgba(255, 255, 255, .55); place-items: start center; }
.mx-ft .mx-ph__txt { padding: 64px 16px 0; }
.mx-ft .mx-ph__txt b { color: rgba(255, 255, 255, .8); }

/* etiqueta branca sobre a arte (mesma em todos os cards) */
.mx-rotulo {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 10px 10px 14px;
  background: var(--baly-branco);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .14);
}
.mx-rotulo__txt { min-width: 0; }
.mx-rotulo b { display: block; font-size: 14px; font-weight: var(--peso-heavy); color: var(--baly-preto); line-height: 1.25; }
.mx-rotulo small { display: block; font-size: 12px; color: var(--cinza-500); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-seta {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--baly-amarelo); color: var(--baly-preto);
  transition: transform var(--t), background var(--t), color var(--t);
}
.mx-seta svg { width: 16px; height: 16px; }
/* a seta só reage quando o cursor está NELA (07/10/2026, pedido: passar sobre a foto não pode mudar a seta) */
.mx-seta:hover { transform: translateX(3px); background: var(--baly-preto); color: var(--baly-amarelo); }

/* ---------- PALCO (Energéticos): a arte troca conforme a linha ---------- */
.mx-palco { grid-column: span 1; }   /* era span 2: o palco largo (1,6:1) cortava demais as fotos verticais do Instagram */
/* duas camadas, no máximo, visíveis: a base (.is-on) e a que SOBE por cima (.is-topo). A subida (clip-path de
   baixo p/ cima, "lata saindo da geladeira") é Web Animations no JS — não há animação CSS aqui. */
.mx-palco__arte { opacity: 0; z-index: 0; }
.mx-palco__arte.is-on { opacity: 1; z-index: 1; }
.mx-palco__arte.is-topo { opacity: 1; z-index: 2; }
.mx-palco .mx-rotulo b, .mx-palco .mx-rotulo small { transition: opacity .2s ease; }

/* ---------- DESTAQUE FUELTECH (foto real do evento; único com véu escuro) ---------- */
.mx-ft { background: #0B0B0D; }
.mx-ft img { object-position: 50% 40%; }
.mx-ft::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(0, 0, 0, .86) 0%, rgba(0, 0, 0, .5) 34%, rgba(0, 0, 0, 0) 62%);
}
.mx-ft__selo {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  padding: 6px 10px; border-radius: 999px;
  background: var(--ft-vermelho); color: #fff;
  font-size: 10.5px; font-weight: var(--peso-heavy); letter-spacing: .08em; text-transform: uppercase;
}
.mx-ft__txt { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 2; color: #fff; }
.mx-ft__txt small { display: block; font-size: 11px; font-weight: var(--peso-bold); letter-spacing: .1em; text-transform: uppercase; color: var(--baly-amarelo); }
.mx-ft__txt b { display: block; margin-top: 4px; font-size: 24px; font-weight: var(--peso-black); line-height: 1.02; letter-spacing: -.01em; }
.mx-ft__txt span { display: block; margin-top: 6px; font-size: 13px; color: rgba(255, 255, 255, .78); }
.mx-ft__txt .mx-ft__cta {   /* vence o `.mx-ft__txt span` (display:block) */
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 14px; font-size: 12.5px; font-weight: var(--peso-heavy); letter-spacing: .04em; text-transform: uppercase;
  color: #fff;
}
.cabecalho__nav .mx .mx-ft__cta { text-transform: uppercase; letter-spacing: .04em; }
.mx-ft__cta svg { width: 16px; height: 16px; transition: transform var(--t); }
.mx-ft__cta:hover svg {   /* idem: só sobre o próprio "Conhecer a edição" */ transform: translateX(4px); }

/* ---------- PARA TODOS OS MOMENTOS: 5 fotos, rótulo curto ---------- */
.mx__grade--fotos .mx-rotulo { padding: 9px 9px 9px 12px; }
.mx__grade--fotos .mx-rotulo { min-height: 58px; }
/* ilha estreita (992–1199): o card FuelTech fica com ~190px → título e CTA mais compactos */
@media (max-width: 1199px) {
  .mx-ft__txt { left: 14px; right: 14px; bottom: 14px; }
  .mx-ft__txt b { font-size: 19px; }
  .mx-ft__txt > span:not(.mx-ft__cta) { font-size: 12px; }
  .cabecalho__nav .mx .mx-ft__cta { font-size: 11px; letter-spacing: .02em; }
  .mx__grade { grid-template-columns: 272px repeat(var(--mx-n, 3), minmax(0, 1fr)); }
  .mx-linha strong { font-size: 12.5px; }
}   /* 1 ou 2 linhas: etiquetas da fileira com a MESMA altura */
.mx__grade--fotos .mx-rotulo b { font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  .mx-lista__marca, .mx-midia img { transition: none; }
  .mx .mx-anim, .mx .mx-midia, .mx .mx-midia > img, .mx .mx-rotulo, .mx .mx-ft__txt, .mx .mx-ft__selo, .mx .mx-lista__marca { animation: none !important; }
  .cabecalho--ilha .mega.mx { clip-path: none !important; transform: none !important; }
}

/* ---------- ajustes do tema ---------- */
.mx__grade--fotos { grid-template-columns: repeat(var(--mx-fotos, 5), minmax(0, 1fr)); }
/* lista sem cards (site no ar, nenhuma imagem cadastrada): o painel encolhe para o conteúdo */
@media (min-width: 992px) {
  .cabecalho--ilha .mega.mx:has(.mx__grade[style*="--mx-n: 0"]) { right: auto; width: max-content; min-width: 320px; }
}
.mx__grade[style*="--mx-n: 0"] { grid-template-columns: minmax(0, 1fr); }
/* palco sem arte (site no ar, sem imagem daquela linha): amarelo liso com brilho, a etiqueta segue */
.mx-palco__arte--vazia { position: absolute; inset: 0; background: radial-gradient(120% 82% at 50% 16%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 56%), var(--baly-amarelo); }

/* =====================================================================
   RÓTULO SEM CAIXA (06/10/2026, pedido: "boa parte da imagem fica sobreposta pelo botão")
   · cards (Hidratação, Infantil, Momentos): a caixa branca saiu → nome em BRANCO sobre um degradê
     escuro na base da foto, a mesma linguagem do card FuelTech (aprovado);
   · PALCO de Energéticos: a etiqueta saiu de vez (a lista ao lado já diz nome e descrição); fica só
     o disco amarelo com a seta no canto, p/ indicar que é clicável.
   ===================================================================== */
.mx-midia:not(.mx-ft)::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .32) 24%, rgba(0, 0, 0, 0) 46%);
}
.mx-rotulo {
  left: 16px; right: 14px; bottom: 14px;
  padding: 0; background: none; box-shadow: none; border-radius: 0;
  align-items: flex-end;
}
.mx-rotulo b { color: var(--baly-branco); font-size: 16px; text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
.mx-rotulo small { color: rgba(255, 255, 255, .82); }
.mx__grade--fotos .mx-rotulo { padding: 0; min-height: 0; left: 14px; right: 12px; bottom: 12px; }
.mx__grade--fotos .mx-rotulo b { font-size: 14px; }
/* palco: sem degradê e sem texto; só a seta no canto */
.mx-palco .mx-midia::after { content: none; }
.mx-palco .mx-rotulo { left: auto; right: 14px; bottom: 14px; }
.mx-palco .mx-rotulo__txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* fica p/ leitor de tela */
.mx-palco .mx-seta { width: 38px; height: 38px; box-shadow: 0 6px 16px rgba(0, 0, 0, .22); }
.mx-palco .mx-seta svg { width: 18px; height: 18px; }

/* ZOOM por foto (meta `_baly_zoom` → --z): `scale` é independente do transform (hover/animações) */
.mx-midia img { scale: var(--z, 1); }