/* ============================================================
   Cartão de mapa (07/10/2026). Ver /ui/mapa-cartao.js.
   ============================================================ */

.mapa-cartao__titulo{text-align:center;font-size:.66rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#7F9394;margin-bottom:18px}
.mapa-cartao{position:relative;width:min(380px,100%);aspect-ratio:380/300;height:auto;margin:0 auto;border-radius:22px;overflow:hidden;cursor:pointer;
  background:linear-gradient(160deg,#222b31,#171d21);border:1px solid rgba(193,223,224,0.12);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,0.04);
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:aspect-ratio .5s cubic-bezier(.2,.8,.2,1),width .5s cubic-bezier(.2,.8,.2,1),transform .25s ease}
.mapa-cartao.aberto{width:min(560px,100%);aspect-ratio:560/400;cursor:default;transform:none}
.mapa-cartao svg.ruas{position:absolute;inset:0;width:100%;height:100%;transition:opacity .4s ease}
.mapa-cartao .rua{stroke:rgba(236,238,232,0.16);stroke-linecap:round}
.mapa-cartao .rua--grande{stroke:rgba(236,238,232,0.30)}
.mapa-cartao .quadra{fill:rgba(236,238,232,0.07);stroke:rgba(236,238,232,0.06)}
.mapa-cartao .mar{fill:rgba(193,223,224,0.06)}
.mapa-cartao__pino{position:absolute;left:50%;top:40%;transform:translate(-50%,-100%);color:#C1DFE0;filter:drop-shadow(0 0 10px rgba(193,223,224,0.55));transition:opacity .3s}
.mapa-cartao__pino::after{content:"";position:absolute;left:50%;bottom:-5px;width:16px;height:6px;border-radius:50%;transform:translateX(-50%);background:rgba(193,223,224,0.25)}
.mapa-cartao__canto{position:absolute;top:14px;right:16px;font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#C1DFE0}
.mapa-cartao::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(180deg,rgba(23,29,33,0),rgba(23,29,33,.95) 58%);pointer-events:none;transition:opacity .3s}
.mapa-cartao.aberto::after{opacity:0}
.mapa-cartao__info{position:absolute;left:18px;right:18px;bottom:16px;z-index:1;transition:opacity .3s}
.mapa-cartao__info strong{display:block;font-size:.95rem;font-weight:600;color:#ECEEE8}
.mapa-cartao__info span{display:block;font-size:.72rem;color:#7F9394;margin-top:3px}
.mapa-cartao__info code em{float:right;font-style:normal;font-family:'Sora',sans-serif;font-size:.58rem;color:rgba(236,238,232,0.35)}
.mapa-cartao__info code{display:block;font-family:'Sora',sans-serif;font-size:.7rem;color:#C1DFE0;margin-top:8px;padding-top:8px;border-top:1px solid rgba(236,238,232,0.10)}
.mapa-cartao__dica{position:absolute;top:14px;left:16px;font-size:.66rem;color:#7F9394}
.mapa-cartao__real{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .4s ease .15s;background:#1b2125}
.mapa-cartao.aberto .mapa-cartao__real{opacity:1;pointer-events:auto}
.m-alfinete{filter:drop-shadow(0 0 8px rgba(193,223,224,0.6))}
.mapa-cartao.aberto svg.ruas,.mapa-cartao.aberto .mapa-cartao__pino,.mapa-cartao.aberto .mapa-cartao__info,.mapa-cartao.aberto .mapa-cartao__dica,.mapa-cartao.aberto .mapa-cartao__canto{opacity:0}
.mapa-cartao__real iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.35) contrast(1.05)}
.mapa-cartao__sim{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:30px;font-size:.8rem;line-height:1.6;color:#7F9394}
.mapa-cartao__acoes{position:absolute;left:12px;right:12px;bottom:12px;display:flex;gap:8px;z-index:2}
.mapa-cartao__acoes a,.mapa-cartao__acoes button{flex:1;font-family:'Sora',sans-serif;font-size:.8rem;font-weight:700;text-align:center;text-decoration:none;border-radius:11px;padding:11px;border:0;cursor:pointer}
.mapa-cartao__acoes a{background:#C1DFE0;color:#181D20}
.mapa-cartao__acoes button{flex:0 0 auto;background:rgba(24,29,32,0.85);color:#ECEEE8;border:1px solid rgba(193,223,224,0.2)}
@media (prefers-reduced-motion:reduce){.mapa-cartao{transition:none;transform:none}}

/* no rodapé (coluna "Sobre"), o cartão ocupa a largura da coluna */
[data-mapa-cartao]{margin-top:15px}
[data-mapa-cartao] .mapa-cartao{width:100%;max-width:380px}
[data-mapa-cartao] .mapa-cartao.aberto{width:100%;max-width:560px}