/* Micreación · mapa de la tienda (portada y Ajustes) */
.mapa { position: relative; height: 440px; overflow: hidden; background: #EDE7E0; border: 1px solid #E6DEE8; box-shadow: 0 0 0 6px #FFFFFF, 0 0 0 7px #C9A24A; }
.mapa__tiles { position: absolute; inset: 0; filter: saturate(.55) sepia(.12); }
.mapa__tiles img { position: absolute; width: 256px; height: 256px; max-width: none; user-select: none; }
.mapa[data-mapa-editable] .mapa__tiles { cursor: crosshair; }
.mapa__pin { position: absolute; width: 0; height: 0; z-index: 2; pointer-events: none; }
.mapa__pin::before { content: ''; position: absolute; left: -11px; top: -24px; border: 11px solid transparent; border-top: 14px solid #C9A24A; border-bottom: 0; }
.mapa__pin img { max-width: none; position: absolute; left: -36px; top: -94px; width: 72px; height: 72px; border-radius: 50%; background: #FFFFFF; border: 3px solid #C9A24A; box-shadow: 0 8px 18px rgba(42, 9, 54, .35); }
.mapa__pin::after { content: ''; position: absolute; left: -7px; top: -4px; width: 14px; height: 8px; border-radius: 50%; background: rgba(42, 9, 54, .28); }
.mapa__zoom { position: absolute; top: 14px; right: 14px; z-index: 3; display: flex; flex-direction: column; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.mapa__zoom button { width: 40px; height: 40px; border: 0; background: #FFFFFF; color: #5B1B6A; font: 500 22px/1 inherit; cursor: pointer; }
.mapa__zoom button + button { border-top: 1px solid #E6DEE8; }
.mapa__zoom button:hover { background: #F4EEF6; }
.mapa__zoom button:focus-visible, .mapa__ver:focus-visible { outline: 3px solid #C9A24A; outline-offset: 2px; }
.mapa__ver { position: absolute; left: 14px; bottom: 14px; z-index: 3; background: #5B1B6A; color: #FFFFFF; font-size: 14px; font-weight: 500; padding: 8px 12px; text-decoration: none; }
.mapa__ver:hover { background: #3A0F4A; }
.mapa__credito { position: absolute; right: 0; bottom: 0; z-index: 3; font-size: 11px; background: rgba(255, 255, 255, .8); padding: 2px 6px; color: #333; }
.mapa__credito a { color: inherit; }
@media (max-width: 860px) { .mapa { height: 340px; } }