html, body { background: #fff; margin: 0; padding: 0; font-family: Helvetica, sans-serif; color: #222; }
body { overflow-x: auto; }

#stage {
    position: relative;
    width: 1100px;
    height: 600px;
    margin: 0 auto;          /* centra mappa + legenda insieme */
}
#map { width: 1100px; height: 600px; display: block; }

#legend {
    position: absolute;
    /* Sotto il contesto su México, vicino al lato ovest del Sud America.
       Posizione relativa allo #stage → si muove con la mappa. */
    top: 430px; left: 200px;
    background: rgba(0,0,0,0);
    padding: 0;
    border: none;
    font-size: 13px;
}
#legend h4 { margin: 0 0 8px; font-size: 13px; font-weight: 700; }
.legend-item { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.color-box { width: 16px; height: 16px; border: 1px solid #aaa; }