/* Evita el recuadro negro al hacer click con el mouse */
.region, .circle {
    outline: none;
    -webkit-tap-highlight-color: transparent;
    /* móvil */
}

/* Mostrar un foco visible solo cuando viene de teclado (navegación por tab) */
.region:focus-visible, .circle:focus-visible {
    outline: 2px solid rgba(0, 0, 0, 0.12);
    outline-offset: 3px;
    /* o un contorno más sutil: stroke, box-shadow, etc. */
}

/* Transiciones suaves */
.region-path, .circle {
    transition: fill 0.18s ease, opacity 0.12s ease;
}