/* grade de mapas: 5 colunas, arte hexagonal com moldura */
.mapx-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:34px 26px;padding:10px 0 30px}
.mapx{position:relative;display:flex;flex-direction:column;align-items:center;text-decoration:none;color:#fff;--c:#7c4dff}
.mapx-art{position:relative;width:100%;aspect-ratio:270/300;transition:transform .35s cubic-bezier(.2,1.2,.4,1)}
/* brilho atrás da arte */
.mapx-art::before{content:'';position:absolute;inset:12% 8%;border-radius:50%;background:var(--c);filter:blur(34px);opacity:.18;transition:opacity .35s}
/* moldura: contorno seguindo o hexágono (sombras sem desfoque) + sombra externa */
.mapx-art img{position:relative;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 0 0 #e9ddff) drop-shadow(2px 0 0 rgba(233,221,255,.85)) drop-shadow(-2px 0 0 rgba(233,221,255,.85)) drop-shadow(0 2px 0 rgba(233,221,255,.85)) drop-shadow(0 -2px 0 rgba(233,221,255,.85)) drop-shadow(0 14px 18px rgba(0,0,0,.6));
  transition:filter .35s}
/* faixa de brilho que passa no hover */
.mapx-art::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);background-size:250% 100%;background-position:120% 0;
  -webkit-mask:var(--mask) center/contain no-repeat;mask:var(--mask) center/contain no-repeat}
.mapx:hover .mapx-art{transform:translateY(-8px) scale(1.04)}
.mapx:hover .mapx-art::before{opacity:.55}
.mapx:hover .mapx-art img{
  filter:drop-shadow(2px 0 0 var(--c)) drop-shadow(-2px 0 0 var(--c)) drop-shadow(0 2px 0 var(--c)) drop-shadow(0 -2px 0 var(--c)) drop-shadow(0 0 16px var(--c)) brightness(1.08) saturate(1.1)}

.mapx-diff{margin-top:-14px;position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:20px;
  font-family:'Chakra Petch',sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  background:#120c26;border:1px solid var(--c);color:var(--c);box-shadow:0 0 12px color-mix(in srgb,var(--c) 45%,transparent)}
.mapx-diff::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--c);box-shadow:0 0 6px var(--c)}
.mapx-name{margin-top:10px;font-family:'Chakra Petch',sans-serif;font-size:18px;font-weight:700;text-align:center;letter-spacing:.02em;line-height:1.2;text-shadow:0 2px 10px rgba(0,0,0,.8);transition:color .25s}
.mapx:hover .mapx-name{color:var(--c)}

@media (max-width:1100px){.mapx-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:860px){.mapx-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 16px}.mapx-name{font-size:15px}}
@media (max-width:520px){.mapx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}